"TypeError: Cannot read property 'servicios' of undefined" Vue.js + Vuefire

Question

So what i want to do is filter the data retrieved from firebase real time database when user selects a category from a select component and fill the filtered data to another select, filling it with all the data succeds but when i try to filter it based on the selection i get the error: console error

Here is my component code:

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">Dashboard</div>
          <div class="card-body">


            <h3>Ingresar requerimiento</h3>
            <div v-if="user" class="alert alert-success" role="alert">Sesión Iniciada Exitosamente!</div>
             CATEGORIA:
            <b-form-select v-model="selectedCategory" :options="options" size="sm" class="mt-3"></b-form-select>
            <div class="mt-3">Selected: <strong>{{ selectedCategory }}</strong></div>
             SOPORTE:

             <b-form-select v-model="selectedSoporte" size="sm" class="mt-3">
               <option v-for="soporte in ComputedServicios" :value="soporte.nombre" :key="soporte.codigo ">{{ soporte.nombre }}</option>

             </b-form-select>



          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { mapGetters } from "vuex";
import { db } from '../firebase';
import firebase from "firebase";
import {servsRef} from '../firebase'
Vue.use(db)
Vue.use(firebase)
//Vue.use(servsRef)

console.log(db);

export default {

   firebase: {
    servicios: servsRef
  },

  computed: {
    // map `this.user` to `this.$store.getters.user`
    ...mapGetters({
      user: "user"
    }),
   ComputedServicios: () => {
     //var vm = this;
     const data = this.servicios
    return data.filter(function (soporte) {
      if(soporte.categoria==this.selectedCategory)
      return soporte
    })
  }
  },


   data() {
      return {

       // servicios: [],
       vm : this,

        selectedSoporte:null,
        selectedCategory: null,
        options: [
          { value: null, text: 'Elija la categoría del soporte' },
          { value: 'electrico', text: 'Eléctrico' },
          { value: 'hidraulico', text: 'Hidráulico' },
          { value: 'electronico', text: 'Electrónico' },
          { value: 'mecanico', text: 'Mecánico'},
          { value: 'neumatico', text: 'Neumático'}
        ]
      }
    }

};
</script>

Answer 1

Rewrite ComputedServicios without the arrow function.

ComputedServicios()  {
    return this.servicios.filter(soporte => soporte.categoria == this.selectedCategory)
}

Further reading: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.