Vue property or method is not defined on the instance but referenced during render?

When trying this code in an online compiler it works fine but on localhost I see this problem:

Property or method “searchfunc” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components)

main.js

var Hotels = [
  { name: "Sham", city: "Damascus", bed: 1, price: 100, id: "h1" },
  { name: "Shahbaa", city: "Aleppo", bed: 3, price: 200, id: "h2" },
  { name: "abcd", city: "Homs", bed: 5, price: 350, id: "h3" },
];

new Vue({
  router,
  store,
  render: (h) => h(App),
  searchs:'',
  Hotels,
  computed: {
    searchfunc() {
      return this.Hotels.filter((srh) => {
        return srh.price >= parseInt(this.searchs);
      });
    }
  }
}).$mount("#app");

Home.vue

<template>
  <div class="home">

<form>
    <input
      type="text"
      v-model="searchs"
      placeholder="Search.."
      
    />
</form>
<p v-for="ps in searchfunc" :key="ps">{{ps.name}}</p>

  </div>
</template>

<script>

export default {
  name: "Home",
};
</script>

Answer

This error occurs when trying to use a property or method in the template (or render function) that doesn’t exist on the component instance.

In this case it’s because searchs and searchFunc variables used in the template of Home.vue are not found below on the instance. They are in the wrong file and need to be moved into Home.vue. Data needs to also go inside the data option:

main.js

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

Home.vue

<script>
const Hotels = [
  { name: "Sham", city: "Damascus", bed: 1, price: 100, id: "h1" },
  { name: "Shahbaa", city: "Aleppo", bed: 3, price: 200, id: "h2" },
  { name: "abcd", city: "Homs", bed: 5, price: 350, id: "h3" },
];
export default {
  name: "Home",
  data() {
    return {
      searchs: '',
      Hotels,
    }
  },
  computed: {
    searchfunc() {
      return this.Hotels.filter((srh) => {
        return srh.price >= parseInt(this.searchs);
      });
    }
  }
};
</script>