Файл vue напрямую ссылается на метод импорта в HTML и сообщает об ошибке. Ошибка при рендеринге: «TypeError: _vm.XXXX не является функцией».

При написании компонента используйте импортированный метод XXXX непосредственно в HTML, чтобы сообщить об ошибке.
Свойство или метод «XXXX» не определено в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным либо в параметре данных, либо для компонентов на основе классов путем инициализации свойства

Это метод, написанный извне

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

Это неправильный способ использовать его там, где он называется

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

Подобная запись напрямую сообщает об ошибке, поскольку HTML, CSS и JS в компоненте vue находятся на одной странице, но функции и переменные, на которые ссылаются внешние ссылки, должны использоваться HTML после вызова экспорта default{}.
Поэтому, как и переменным, лучше всего присваивать значения и объявлять их один раз перед использованием.

Правильное использование

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