Javascript Vue属性或方法未在实例上定义，但在渲染期间被引用？

在联机编译器中尝试此代码时，效果良好 但在localhost上，我看到了这个问题：

属性或方法“searchfunc”未在实例上定义，但在渲染期间被引用。确保此属性在“数据”选项中或在基于类的组件中是被动的）

main.js

var酒店=[
{姓名：“Sham”，城市：“大马士革”，床位：1，价格：100，id:“h1”}，
{名称：“沙巴阿”，城市：“阿勒颇”，床位：3，价格：200，id:“h2”}，
{姓名：“abcd”，城市：“霍姆斯”，床位：5张，价格：350，id:“h3”}，
];
新Vue({
路由器，
商店，
渲染：（h）=>h（应用程序），
搜索：“”，
酒店，
计算：{
searchfunc（）{
返回此.Hotels.filter（（srh）=>{
返回srh.price>=parseInt（this.searchs）；
});
}
}
}).$mount（“#app”）；

Home.vue

{{ps.name}
导出默认值{
姓名：“家”，
};

尝试使用组件实例上不存在的模板（或渲染函数）中的属性或方法时，会发生此错误

在这种情况下，这是因为在下面的实例中找不到Home.vue模板中使用的

searchs

和

searchFunc

变量。它们位于错误的文件中，需要移动到Home.vue中。数据还需要进入

数据

选项：

main.js

newvue({
路由器，
商店，
渲染：（h）=>h（应用程序），
}).$mount（“#app”）；

Home.vue

康斯特酒店=[
{姓名：“Sham”，城市：“大马士革”，床位：1，价格：100，id:“h1”}，
{名称：“沙巴阿”，城市：“阿勒颇”，床位：3，价格：200，id:“h2”}，
{姓名：“abcd”，城市：“霍姆斯”，床位：5张，价格：350，id:“h3”}，
];
导出默认值{
姓名：“家”，
数据（）{
返回{
搜索：“”，
酒店，
}
},
计算：{
searchfunc（）{
返回此.Hotels.filter（（srh）=>{
返回srh.price>=parseInt（this.searchs）；
});
}
}
};