vue中使用imort导入函数后使用出错

在vue中使用import模块导入了一个function，然后在html中使用了之后，控制台报了如下错误

Property or method "XXXX" 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, by initializing the property.

注意，是在template里面使用了这个函数，如果是在script中使用就不会出现这个错误。

解决办法就是把这个函数从新在data里面定义一个函数。

Example

// test.js
const testF = () => {
	console.log('test')
}

export default testF

// index.vue
import testF from './test.js'

data() {
	return {
		test: testF   // 这里把`testF`函数赋值给`test`
	}
}


<template>
	<button @click="test">Click me</button>   // 使用赋值之后的`test`就不会出错了 
<template> 

总结： 如果要在template里面使用import导入的东西，需要在data里面定义一下，如果在<script>里面使用则不需要定义，直接使用即可。