Vue.js вычисляет / перемещает свойство filterWorkers из данных в вычисленное

Я надеюсь, что ты сможешь мне помочь

Мне нужно было переместить свойство filterWorkers и поля в вычисляемые свойства, как вы можете видеть ниже. Я использую b-table из начальной загрузки и множественный выбор из vue.material, честно говоря, я не знаю, как лучше всего это сделать

Bellow you will find my a whole code

import { isEmpty } from "lodash";
import { workers } from "../api/workers";

      <multiselect>
        <label for="filters">Technology</label>
        <md-select
          @md-selected="onChange"
          v-model="selectedFilters"
          name="filters"
          id="filters"
          multiple
        >
          <md-option
            v-for="(v, index) in filters"
            :key="index"
            :value="v.code"
            >{{ v.name }}</md-option
          >
        </md-select>
      </multiselect>

мой компонент множественного выбора - vue.material

  <div>
        <b-table
          id="my-table"
          :items="filteredWorkers"
          :fields="fields"
          :per-page="perPage"
          :current-page="currentPage"
          small
        >
        </b-table>

vue.b-table из начальной загрузки

      </div>
    </div>
  </div>
        <div>
        
    const prepareSpecializationsForDisplay = (data) => {
      const results = data.map((x) => ({
        ...x,
        specializations: x.specializations.map((x) => x.name).join(", "),
      }));
    
      return results;
    
    
    
      name: "HomePage",
      data: () => ({
        selectedFilters: [],
        workers: workers,
        perPage: 6,
        currentPage: 1,
        filteredWorkers:prepareSpecializationsForDisplay(workers)
        fields: [
          {
            key: "uuid",
            sortable: true,
            label: "ID",
          },
          {
            key: "first_name",
            sortable: true,
          },
          {
            key: "last_name",
            sortable: true,
          },
          {
            key: "specializations",
          },
          { key: "actions" },
        ],
        filters: [
          {
            code: "net",
            name: ".NET",
          },
          {
            code: "react",
            name: "React JS",
          },
          {
            code: "c#",
            name: "C#",
          },
          {
            code: "node",
            name: "Node JS",
          },
        ],
      }),
      computed: {
        rows() {
          return this.filteredWorkers.length;
        },
        }
      }`
    
    <div>
      methods: {
        onChange(selectedFilters) {
          const results = isEmpty(selectedFilters)
            ? this.workers
            : this.workers.filter((x) =>
                x.specializations
                  .map((s) => s.code)
                  .some((r) => selectedFilters.indexOf(r) !== -1)
              );
          this.filteredWorkers = prepareSpecializationsForDisplay(results);
        },
      },
    };
    </div>

</div>