javascript插入后无法编译Vue指令

Question

我正在通过vue和javascript将条目插入<ul>元素中。在其中一项中，插入了带有@click指令的图标，但是，当图标显示在源代码中时，它实际上显示了@click指令，而单击则不执行任何操作。下面是代码示例。我认为行没有被编译？我如何才能将HTML添加到dom以及如何使@click指令起作用？

validateData: function() {
            this.loading = true;
            axios.post('/validate-data', this.$data.model)
                .then((response) => {
                    console.log(response);
                    var select_opt = 1;

                        var email = $('#email').val();
                        var address = document.querySelector('.input_description').value;
                        var name = document.querySelector('.input_title_desc').value;
                        var phone = $('#phone').val();



                        var class_li  =['list_shopping list_dsp_none','list_work list_dsp_none','list_sport list_dsp_none','list_music list_dsp_none'];

                        var cont = '<div class="col_md_1_list"><p id="phone_' + contador + '">'+phone+'</p></div><div class="col_md_2_list"><h4 id="name_' + contador + '">'+name+'</h4><p id="address_' + contador + '">'+address+'</p></div><div class="col_md_3_list"><div class="cont_text_date"><p id="email_' + contador + '">'+email+'</p></div><div class="cont_btns_options"><i @click="sendSMS('+contador+')" class="fas fa-mobile-alt fa-2x" style="color: #6d696f; position: absolute; left:-13px; cursor:pointer;"></i><ul><li><i onclick="finish_action(' + select_opt + ',' + contador + ')"<i class="far fa-times-circle fa-2x" style="color: indianred; position: absolute; right: -32px; cursor: pointer;"></i></li></ul></div></div>';

                        var li = document.createElement('li');
                        li.className = class_li[select_opt]+" li_num_"+contador;

                        li.innerHTML = cont;
                        document.querySelectorAll('.cont_princ_lists > ul')[0].appendChild(li);
                        setTimeout(function(){  document.querySelector('.li_num_'+contador).style.display = "block";
                        },100);

                        setTimeout(function(){
                            document.querySelector('.li_num_'+contador).className = "list_dsp_true "+class_li[select_opt]+" li_num_"+contador;
                            contador++;
                        },200);
                    $('#email').val('');
                    $('.input_description').val('');
                    $('.input_title_desc').val('');
                    $('#phone').val('');
                    this.model.name = '';
                    this.model.phone = '';
                    this.model.email = '';
                    this.model.address = '';
                    this.loading = false;
                })
                .catch(error => {
                    this.errors.record(error.response.data.errors);
                    this.loading = false;
                });

这是有问题的行：

<i @click="sendSMS('+contador+')" class="fas fa-mobile-alt fa-2x" style="color: #6d696f; position: absolute; left:-13px; cursor:pointer;"></i>

该行无法正确地“编译”，并且在DOM中显示为原义字符串，并且按钮不起作用。