Vue代码不生效，想要通过Vue将超链接通过表单以delete请求提交

找了好几个朋友都找不出错误，各位帅哥美女为我解惑！
关键内容：Vue，SpringMVC Delete方式提交。采用Vue将超链接转为的提交方式借助form表单转为 delete 提交。但是vue相关的js代码不起作用。
代码如下图：下面是一个网页，主体是一个输出员工信息的表格，可以对员工信息进行修改和删除。
出错情况:点击删除后跳转的页面是《a》标签默认的get方式请求提交，但是在Vue代码中我已经将《a》标签的默认功能停止了，并且通过form表单来提交该 delete请求。
经过网页的检查，Vue文件获取正常200，就只是单纯的vue代码没有生效，各位xd 帮忙，搞了一个下午，累

html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>employeestitle>
          <link rel="stylesheet" th:href="@{/static/css/css1.css}">
head>

<body>
<h1>员工信息表h1>
<div id="app">
<div class="table-container">
    <table>
        <tr>
            <th>IDth>
            <th>姓氏th>
            <th>电子邮件th>
            <th>性别th>
            <th>操作(<a th:href="@{/to/add}" style="color: bisque">添加a>)th>
        tr>
        <tr th:each="employee:${session.employees}" class="row">
                <td th:text="${employee.id}">td>
                <td th:text="${employee.lastName}">td>
                <td th:text="${employee.email}">td>
                <td th:text="${employee.gender}">td>
                <td><a th:href="@{'/employee/'+${employee.id}}">修改a>
                    |
                    <a @click="deleteEmployee()" th:href="@{'/employee/'+${employee.id}}">删除a>td>
            
        tr>
    table>
    <form method="post">
        <input type="hidden" name="_method" value="Delete">
        <input type="submit" value="提交">
    form>
div>
div>
<script type="text/javascript" th:src="@{/static/js/vue.js}">script>
<script type="text/javascript">
    var vue = new Vue({
        methods:{
            el:"#app",
            deleteEmployee(){
                //获取form表单
                 var form = document.getElementsByTagName("form")[0];
               //将超链接的href属性值赋值给表单的action属性
                form.action = event.target.href;
                //将表单提交
                form.submit();
                //阻止超链接的默认行为
                event.preventDefault();
            }
        }
    });
script>
body>
html>