在 SPA 中使用选项 API，如何（在哪里）定义将从 html href 调用的函数？

在下面的 codepen 中演示，一切正常。

CODEPEN

但是，在我的单个页面上：

    <template>
        <div v-html="my_div" />
    </template>
    
    <script>
    /* function MyFunction() {
      alert();
    }; */
    
    const MyFunction = () => {
      alert();
    };

   /* Just for explanation, because the data comes from the database
   export default {
    data() {
      return {
        my_div:'<a href="javascript:MyFunction(10)">link call function</a> ',
      }
    }
  */
}
    </script>

调用该函数返回错误：

Uncaught ReferenceError: MyFunction is not defined

显然，该函数是在调用之后定义的

有什么想法可以解决这个问题吗？