filterByFormatted won't work when using field key not in data object

[bobvandevijver]

Describe the bug

When you specify a key in the field definition which does not exist in your data object, the filterByFormatted option doesn't work. I used a dedicated key to create a new field with a formatter that combines three other fields which are not shown in the table.

Steps to reproduce the bug

Use the following template:

<template>
  <div>
    <b-input v-model="filter"></b-input>
    <b-table :fields="fields" :items="items" :filter="filter"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        filter: null,
        items: [{
          col1: 'Item',
          col2: 'Something',
        }],
        fields: [{
          key: 'col1',
        }, {
          key: 'col2',
          formatter: () => 'Foo',
          filterByFormatted: true,
        }, {
          key: 'col3',
          formatter: () => 'Bar',
          filterByFormatted: true,
        }]
      }
    },
  }
</script>

Or open https://codesandbox.io/s/jccv2?file=/App.vue.

Search on Foo -> Item is still visible
Search on Bar -> Item is no longer visible

Expected behavior

b-table should respect the new field when filterByFormatted is set for it.

Versions

Libraries:

• BootstrapVue: 2.16.0
• Bootstrap: 4.5.0
• Vue: 2.6.11

Environment:

• Device: Laptop
• OS: Windows 10
• Browser: Edge
• Version: 84.0.522.61

Demo link

See https://codesandbox.io/s/jccv2?file=/App.vue

[bobvandevijver]

Wauw, awesome and fast work @jackmu95 😃