Dom7 generated DOM not binding

code
html

<div id="id-1">
  <div class="add-input">
	<span @click="subtract">-</span>
	<input type="number" value="0" />
	 <span @click="add">+</span>
  </div>
  <div @click="adddiv">AddDIV</div>
</div>

js

return {
  methods: {
       adddiv:function(el){	
	   this.$(el.target).parents("#id-1").append('<div class="add-input">\
		  <span @click="subtract">-</span>\
		  <input type="number" value="0" />\
		  <span @click="add">+</span>\
	  </div>');
        },
        add: function (el) {
	    var input=this.$(el.target).siblings("input");
            input.val(parseInt(input.val())+1);
        },
       subtract: function (el) {
	    var input=this.$(el.target).siblings("input");
            if(input.val()>0) input.val(parseInt(input.val())-1);
        },
   },
}

Q: ‘adddiv’ method cannot bind ‘add’ method?

No, such dynamic events can only be binded on component creation at the moment

thanks,
I tried

on:{
		pageInit:(){

               }
}

,But not yet.
Can you give me an example?

$(“body”).on(“click”,".adddiv",function(){
//some code
});