vue文件在html中直接引用 import 传过来的方法报错Error in render: “TypeError: _vm.XXXX is not a function“

在写组件时直接在html中使用 import过来的方法XXXX报错
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

这是外部写的方法

export const XXXX = (val) =>{
return val+1
}

这是调用的地方
错误的使用方法

<template>
<div>
{{XXXX(123)}}
</div>
</template>
import { XXXX } from "@/utils";

这样写直接报错，因为vue组件中HTML，css，js在同一个页面，但是外部引用的函数、变量是需要在export default{ }抛出之后html才能使用的。
所以方法跟变量一样最好再赋值、声明一次后使用。

正确的使用方法

<template>
<div>
{{ABC(123)}}
</div>
</template>
import { XXXX } from "@/utils";
export default {
name:"123",
 methods: {
     ABC(num) {
	      return XXXX(num);
    	},
	}
}