第二次点击下拉框触发vue事件按钮失效

Question

问题描述

第二次点击下拉框触发vue事件按钮失效

问题出现的环境背景及自己尝试过哪些方法

本人新手，求大神指点

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<div id="main" class="wall">

    <div class="result-btn">
        <select name="campaign" id="campaign" onchange="campaignChange(this)">
            <option value="未选择" selected="selected">--请选择--</option>
        </select>
    </div>
</div>
<div id="result" class="result">
</div>
<div id="tools" class="tools">
    <button v-for="value in btns" @click="onClick(value)" class="pure-button" :class="{ 'button-error': selected == value}">{{value}}</button>
    <button class="pure-button" @click="toggle" :class="{'button-secondary': !running,
           'button-success': running}">{{running?'停!':'开始'}}</button>
    <button class="pure-button button-warning" @click="reset">重置</button>
</div>

<script type="text/javascript">

function campaignChange() {
    var campaignid = document.getElementById("campaign").value;
    
    $.ajax({
        url: 'member.php?campaignid='+campaignid,
        type: 'GET',
        async: true,
        contentType: 'application/json; charset=UTF-8',
        dataType: 'json',
        success: function(response) {                   
            if(document.getElementById("myCanvas")){
                var element=document.getElementById("myCanvas");
                element.parentNode.removeChild(element);
                //window.location.reload();
            }
            var canvas = document.createElement('canvas');
            canvas.id = 'myCanvas';
            canvas.width = document.body.offsetWidth;
            canvas.height = document.body.offsetHeight;
            document.getElementById('main').appendChild(canvas);

            new Vue({
                el: '#tools',
                data: {
                    selected: 30,
                    running: false,
                    btns: [
                        30, 10, 5, 2, 1
                    ]
                },
                mounted() {
                    canvas.innerHTML = createHTML();
                    TagCanvas.Start('myCanvas', '', {
                        textColour: null,
                        initial: speed(),
                        dragControl: 1,
                        textHeight: 14
                    });
                },
                methods: {
                    reset: function() {

                    },
                    onClick: function(num) {
                       
                    },
                    toggle: function() {
                        
                    }
                }
            });
        }
        
    })
}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

第二次点击下拉菜单时button失效，无法点击，请大神指点
因为每次点击都会新建myCanvas，所以我把之前创建的删除了

            if(document.getElementById("myCanvas")){
                var element=document.getElementById("myCanvas");
                element.parentNode.removeChild(element);
                //window.location.reload();
            }