Vue3でコンポーザブル関数を作りたいが、エラー「Cannot read properties of undefined (reading '__vccOpts')」が解決できない

Question

実現したいこと

vue3でComposal Functionを利用して、関数を外部ファイルにして共通化しようとしたところ、
デプロイ(npm run serve)時に、エラーが発生してしまい、解決できません。

グローバル関数を作りたいです。

前提

vueのその他コンポーネントファイルは期待通りに動きます。
Vue CLI vue@3.3.4
webpack@5.88.1

発生している問題・エラーメッセージ

エラーメッセージ

「Cannot read properties of undefined (reading '__vccOpts')
TypeError: Cannot read properties of undefined (reading '__vccOpts')
    at exports.default (webpack-internal:///./node_modules/vue-loader/dist/exportHelper.js:9:22)
    at eval (webpack-internal:/// ～ローカルファイル名のため略～」

該当のソースコード

関数ファイルたコード

<script>    
import { onMounted } from 'vue'
export function useTestFunction() {
    onMounted(()=>{
        console.log('test');
    })
    return 'test';
}
</script>

関数の読み込み側のコード

<template>
test page
</template>
<script setup>
import {useTestFunction} from '../ファイルパス';
const sec = useTestFunction();
console.log(sec);
</script>

試したこと

エラーメッセージに表示されている、「'__vccOpts'」が何なのかわからず、
調べてみたのですが、型？なのか、原因がわからずにおります。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

コンポーザブルファイルをhoge.jsで記述する場合は、本来スクリプトタグそのものが不要、あるいは<script></script>とスクリプトタグを付与している場合、define component…というボイラープレートが必要な従来のcomposition APIの記法しか対応できません。Vue3.2以降でsetup記法を使うならば、コンポーザブルに対してもタグに命令が必要です。

コンポーザブルファイルをjs、かつsetup記法を利用したい場合は

<script setup>
//コンポーザブルを書き込む
</script>

と、setup記法のプロパティ付与が必要です。tsならば

<script setup lang="ts">
//コンポーザブルを書き込む
</script>

となります。

上記エラーはどうもvueのscript setup記法のときにルートが見つからないときに起きる、つまりsetupプロパティを付与していないのに、setup記法を使用したときに起きるエラーのようです。
Script setup - Cannot read properties of undefined (reading '__vccOpts')

ちなみに、vueファイルでコンポーザブルを作った場合はテンプレートは必須になります（テンプレートなしのVueファイルはエラー）。