How to pass a function with a parameter to v-select?

Tried to do it this way, but nothing works…

I tried doing it through template, but it didn’t work either. Maybe I’m doing something wrong.

I need one v-select to display all dir from the data array, and the second v-select to display all devices from the same object depending on the selected dir.

<template>
  <div>
    <b-card>
      <b-card-title>Logs</b-card-title>
      <b-row align-v="center">
        <b-col md="2">
          <v-select v-if="dirs" v-model="dir" :options="dirs" />
        </b-col>
        <b-col md="2">
          <v-select
            v-if="data"
            v-model="device"
            label="name"
            :items="data"
            item-value="dir"
            dense
            outlined
            return-object
            v-on:change="getDevices"/>
        </b-col>
      </b-row>
      <b-row>
        <b-button variant="primary" class="mt-1 float-right">Update</b-button>
      </b-row>
    </b-card>
  </div>
</template>
<script>
import { BCard, BCardTitle,BButton, BRow, BCol } from "bootstrap-vue"
import vSelect
from "vue-select"

export default {
  components: {BCard, BFormTextarea, BCardTitle, BButton, BRow, BCol, vSelect,},
  data() {
    return {
      logs: null,
      data: [{dir: '/var/log/test1',devices: ['a','b','c']},
             {dir: '/var/log/test2',devices: ['a','b','c']}],
      dirs: [],
      dir: null,
    }
  },
  methods: {
    getDevices(type) {
      let devices = this.data.filter((val)=> {
        return val.dir == type
      });
    },
  },
};
</script>

The code I tried is above.
The data is not displayed, no errors.