新手想要學習前端框架，目前選擇vue
照著做todo list，想要添加一個Tag功能
現在想法是先用兩個input，一個是事項內容一個是Tag的新增
點選tag區塊再添加事項內容去新增代辦事項
原本我的寫法是先在data創建一個obj物件在更改內容加進陣列中，但是只要添加第二次後陣列中的所有內容都會一樣
後來有成功做出來了，但還是想知道為甚麼

//不成功
 data: {
                title: '代辦事項',
                count: 1,
                Tags: [], //tag arr
                items: [], //item arr
                obj: {
                     id: '',
                     content: '',
                     status: '',
                     Tag: '',
                },
                newItem: '',
                newTag: '',
            }, methods: {
                insertItem: function () {
                    this.obj.id=this.count++;
                    this.obj.content=this.newItem;
                    this.obj.status=false;
                    this.items.push(obj)
                    console.log(this.items)
                    this.newItem='';
                },
                insertTag: function () {
                    this.Tags.push({
                        tag: this.newTag,
                    })
                    console.log('insertTag:'+this.newTag)
                },
                getTag: function (tagName) {
                    this.obj.tag=tagName;
                    console.log('getTag:'+tagName);
                    // console.log(this.obj);
                },
            }

<div id="todo">
        {{title}}
        <div>
            <!--新增內容區塊-->
            <label for="newItem">新事項:</label>
            <input type="text" v-model="newItem">
            <button class="btn btn-info" v-on:click="insertItem">new Item</button>

            <hr>
            <!--新增Tag-->
            <label for="newTag">new Tag:</label>
            <input type="text" v-model="newTag">
            <button class="btn btn-info" v-on:click="insertTag">Tag</button>
            <!--Tag區塊-->
            <ul v-if="Tags.length>0"> 
                <li v-for="(tag,index) in Tags">
                    <a href="#" v-on:click="getTag(tag.tag)">{{tag.tag}}</a>
                </li>
            </ul>

        </div>

        <hr>
  <!--顯示新增完事項-->
        <div>
            <ul v-if="items.length>0">
                <li v-for="(item , index) in items" >
                    <span v-text='item'></span>
                    <button class="btn btn-info" v- on:click="complete(index)">complete</button>
                </li>
            </ul>
        </div>
    </div>

//成功正常用作
 let todo = new Vue({
            el: '#todo',
            data: {
                title: '代辦事項',
                count: 1,
                Tags: [], // tag arr
                items: [], // item arr
                Tag:'', // 當下tag
                // obj: {
                //     id: '',
                //     content: '',
                //     status: '',
                //     Tag: '',
                // },
                newItem: '',
                newTag: '',
            }, methods: {
                insertItem: function () {
                    obj = {
                        id: this.count++,
                        content: this.newItem,
                        status: false,
                        tag:this.Tag,
                    }
                    this.items.push(obj)
                    console.log(this.items)
                    this.newItem='';
                },
                insertTag: function () {
                    this.Tags.push({
                        tag: this.newTag,
                    })
                    console.log('insertTag:'+this.newTag)
                },
                getTag: function (tagName) {
                    this.Tag=tagName;
                    console.log('getTag:'+tagName);
                
                },
            }
        })