在视图中分离 vue 函数，并在调用函数实例之前渲染

问：

所以我尝试使用 yii2 将 vuejs3 作为 rest api。所以我使用 cdn 来包含 vue 并将 vue 脚本放在带有以下模板的 appraisalJs.js 文件中。

//appraisalJs.js 
const app = Vue.createApp({
data() {
    return {
        models: window.models,
        selectedIds: [],
        selectAll: false,
        searchCriteria: {},
        sortKey: '',
        sortOrder: 1,
        dateVariable: ''
    };
},
created() {
//some code here
},
computed: {
//some code here
},
methods: {
//some code here
    sendSelectedIds() {
        const selectedIds = this.selectedIds;
        const year = window.year;
        const csrfToken = window.csrfToken;
        if (selectedIds.length === 0) {
            alert('No IDs selected.');
            return;
        }

        const data = new FormData();
        data.append('selectedIds', JSON.stringify(selectedIds));
        data.append('mainId', mainId);
        fetch('/appraisal/initiate-staff-appraisal', {
            method: 'POST',
            body: data,
            headers: {
                'X-CSRF-Token': csrfToken
            }
        })
                .then((response) => {
                    if (response.ok) {
                        const redirectUrl = `/appraisal/index?year=${year}`;
                        window.location.href = redirectUrl;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
    }
}
});
app.mount('#app');

然后下面是我如何调用这个文件和我用来包含函数的脚本

//indexInitiate.php
<div id="app">
    <div class="pl-2">
        <h3>Initiate Staff Appraisal - <?= $main->index ?></h3>
        <p><?= Html::encode($main->description) ?></p>
    </div>
    <div class="row m-1 p-1">
        <div class="col pl-0">
            <?= Html::a('Reset Filter <i class="fas fa-search-minus"></i>', "?id=$main->id", ['class' => 'btn btn-primary']) ?>    
        </div>
        <div class="col pr-0">
            <button class="btn btn-success float-right" @click="confirmAndInitiateAppraisal">Initiate Staff Appraisal for Selected IDs</button>
        </div>
    </div>
    <div class=" pl-0 pr-3">
        <?php
        echo $this->render('_staffList', [
        ]);
        ?>
    </div>
</div>


<script>
    window.models = <?= $users ?>;
    window.mainId = <?= $main->id ?>;
    window.csrfToken = '<?= Yii::$app->request->getCsrfToken() ?>';

</script>
<script src="\js\appraisal\appraisalJs.js"></script>
<script>
    app.component('confirmAndInitiateAppraisal', {
        methods: {
            confirmAndInitiateAppraisal() {
                const confirmed = window.confirm("Confirm initiate staff appraisal for the selected staff/s?");
                if (confirmed) {
                    app.$options.methods.sendSelectedIds.call(app);
                }
            }
        }
    });
</script>

所以我目前的错误是在渲染期间访问了属性“confirmAndInitiateAppraisal”，但未在实例上定义。所以我试过了，但这不是错误所说的功能。我该如何解决这个问题的任何起点。我想在 appraisalJs.js 之外调用这个函数，以便我可以修改 sendSelectedIds（） 函数以接受变量以使其动态。app.mounted