Javascript 在提交时更改表单操作属性

我有一个有多个按钮的表单。单击id为“新建”的按钮时，我想更改

操作

和

目标

属性

以下是我的尝试：

<div id="root">
    <form :action="form.action" ref="form" :target="form.target">
        <button >Submit to /test</button>
        <button id="new" @click.prevent="submit">Submit to /new</button>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#root', 
        data: {
            form: {
                action: '/test',
                target: '_blank'
            }
        },
        methods: { 
            submit: function() {
                this.form = {
                    action: '/new',
                    target: '_self'
                };
                console.log(this.$refs.form);
                this.$refs.form.submit();
            }
        }
    })
</script>

提交/测试
提交给/新
var app=新的Vue({
el:'根'，
数据：{
表格：{
操作：'/test'，
目标：“\u blank”
}
},
方法：{
提交：函数（）{
此.form={
操作：'/new'，
目标：''u self'
};
console.log（此.$refs.form）；
此.$refs.form.submit（）；
}
}
})

但是，似乎表单总是提交到

/test

，即使单击

#new

按钮。 另外，

console.log（这是$refs.form）返回


那么，为什么表单没有提交给
/new
？
看来
防止
的事情是麻烦制造者

这项工作：

<div id="root">
    <form :action="form.action" ref="form" :target="form.target">
        <button >Submit to /test</button>
        <button id="new" @click="submit">Submit to /new</button>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: '#root', 
        data: {
            form: {
                action: '/test',
                target: '_blank'
            }
        },
        methods: { 
            submit: function() {
                this.form = {
                    action: '/new',
                    target: '_self'
                };
            }
        }
    })
</script>


提交/测试
提交给/新
var app=新的Vue({
el:'根'，
数据：{
表格：{
操作：'/test'，
目标：“\u blank”
}
},
方法：{
提交：函数（）{
此.form={
操作：'/new'，
目标：''u self'
};
}
}
})

然而，我不知道为什么旧版本不起作用