Vuejs-将参数传递给动态创建的DOM元素中的函数

Question

我有一个通过click事件处理程序绑定到动态创建的锚元素的函数。该函数带有一个参数，该参数是一个对象。

我正在组件中执行此操作

methods:{
        displayUserTypes(){
            axios.get('/antenna-monitor/pull-user-types').then( ({data}) => 
            {
                for(var i in data)
                {
                    $('#user-roles').dataTable().fnAddData( [
                        data[i].name,
                        data[i].description,
                        '<a href="#" title="Edit" @click.prevent="editModal('+data[i]+')"><i class="fa fa-edit"></i></a> | <a href="#" title="Delete"><i class="fa fa-trash"></i></a>'
                    ]);
                }

                new Vue({
                    methods: {
                        editModal(roles) {
                            this.form.reset();
                            $('#userRolesModal').modal('show');
                            this.form.fill(roles);
                        }
                    }
                }).$mount('#user-roles')

            }
            )
        },
        created() {
            this.displayUserTypes();         
        }

displayUserTypes函数填充我的数据表。在动态创建的链接中定义我的click事件处理程序之前，一切正常。数据填充在我的数据表中，我可以调用editModal函数（这将打开一个模式）。

但是我需要将该对象作为参数传递给editModal函数以获取当前的用户对象，以便填充打开的模式。但是我收到了Vue编译错误。似乎在编译动态创建的链接时没有解析该对象。

随附的是我的控制台的屏幕截图：