Unknown custom element: <b-form-select-option>

I am using Nuxt CLI. I want to create a select component. my selection tag must have a placeholder. I used the sample in the documentation for this but received the following warning :

[Vue warn]: Unknown custom element: <b-form-select-option> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

use a sample

<template>
  <div>
    <b-form-select v-model="selected" :options="options" class="mb-3">
      <!-- This slot appears above the options from 'options' prop -->
      <template v-slot:first>
        <b-form-select-option :value="null" disabled>-- Please select an option --</b-form-select-option>
      </template>

      <!-- These options will appear after the ones from 'options' prop -->
      <b-form-select-option value="C">Option C</b-form-select-option>
      <b-form-select-option value="D">Option D</b-form-select-option>
    </b-form-select>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: 'A', text: 'Option A (from options prop)' },
          { value: 'B', text: 'Option B (from options prop)' }
        ]
      }
    }
  }
</script>

package.json

"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.0.0",
"nuxt": "^2.11.0",

[tmorehouse]

Upgrade to BootstrapVue v2.2.2

[tmorehouse]

Someone else had a similar issue and it was because they were using v2.1.0 (not v2.2.0):

https://stackoverflow.com/questions/59678515/b-form-select-option-not-working-in-bootstrap-vue