动态创建vueJS列表中的元素

Question

我有一个小小的列表，在vueJS中运行得很好：

<ul id="pieces">
<li v-for="stuff in pieces">
    <label>
    <span></span>
    <input
        v-model="checkedpieces"
        v-on:change="toggleStuff"
        type="checkbox"/>
    </label>
</li>

此外，我想动态加载该列表中的列表元素，因为它可能是一个大数字，不能使用v-if左右。

我相信我应该使用Vue.extend并将html复制到模板中：

var customPiece = Vue.extend({

    template: '<li class="Piece" cod-unidad="'+assetCodigoUnidad+'"         nombre_cliente="'+assetNombreCliente+'"/>'+
            '<label>'+assetNombreUnidad+
            '<span class="piecesAssetsGroup piecesAssetsClientRed">'+assetNombreCliente+'</span>'+
            '<input type="checkbox" value="'+assetCodigoUnidad+'-'+assetNombreCliente+'" cod-unidad="'+assetCodigoUnidad+'" nombre_cliente="'+assetNombreCliente+'" v-on:change="togglePiece">'+
            '</label>'+
            '</li>',

var v_customPiece = new customPiece().$mount();
$('#pieces').append(v_customPiece.$el);

它有效，但是当我尝试触发 v-on 触发器时，由于范围发生了变化，它会失败。

有什么想法吗？