Каков правильный импорт функций и объектов во vuejs для использования в шаблоне?

Question

[bagrovykt]

//fx.js
export function some(value) {
  return value++
}

// somecomponent.vue
<template>
  {{ some(1) }}
</template>
<script>
import { some } from "fx.js"
</script>

Добрый день, никак не могу понять в чем дело. Импортирую функцию из внешнего js, объявляю его в компоненте, обращаюсь в шаблоне => получаю ошибку несуществующей функции. То же самое через computed-свойство работает, но какой же тогда смысл "выносных" функций. Или для использовании в шаблоне нужно импортировать функции как-то иначе? Есть ощущение, что функция импортируется позже, чем рендерится шаблон, если это действительно так, то как же это обойти?

P.S. import * as ... тоже испробовано

Answer 1

[Виктор Майоров]

<script setup>
import { some } from "fx.js"
return { some }
</script>

или

<script>
import { some } from "fx.js"
export default {
  methods: {
    some,
  }
}
</script>

Comments

[bagrovykt]

Благодарю, то, что надо, только return убрать

[bagrovykt]

На деле объявлять дальше уже не обязательно, в шаблоне сразу работает, и объекты видны и функции исполняются, Вы абсолютно верно направили на тег setup
https://vuejs.org/api/sfc-script-setup.html - почитал тут,

When using <script setup>, any top-level bindings (including variables, function declarations, and imports) declared inside <script setup> are directly usable in the template