vue组件数据改变但是组件不刷新怎么办（关于v-show）

今天写项目时遇到了一个坑，情景描述如下：
用v-for创建了8个li，每个li都有一个类按钮（下文就称之为按钮），点击该按钮时，e.target的背景图片发生变化，再点击该按钮e.target的背景图片又恢复成初始状态，如此循环。
未点击时效果图：

初始状态.png

点击后：

第一次点击后.png

如果只是用js,很容易解决，可在vue组件中并非如此了。
开始的时候，只写了一个控件来切换背景图片，但是类似于this.item=!this.item表达式并不能如愿切换。
然后就写了两个控件，不同控件不同背景图，在设置样式时让他们重叠，通过v-show指令来决定显示哪个控件。在这里，v-show监控的值也是变化的。这样对用户来说，“还是一个按钮”。然而结果却是，数据如愿改变，dom元素的样式并没有随之变化。具体就是第二个控件显示的v-show的值始终不变。无论怎么修改数据（data,computed...），我自岿然不变，崩溃啊。
贴代码吧：
html部分：

<ul class="selectmenu">
                        <li v-for="(item,index) in createAccount.menu" class="col-md-3 col-xs-6" :key="index" :v-model="index">
                            <div class="item">
                                <div class="pic">
                                    <img :src="'image/account/'+item.img" alt="">
                                    <span v-show="unchecked[index]" :data-idx="index" class="selected" :style="selectStyle" @click="changeStyle()"></span>
                                    <span v-show="unchecked[index]"  :data-idx="index"  class="selected" :style="selectedStyle" @click="changeStyle1()"></span>
                                </div>
                                <p>{{item.text}}</p>
                                <div v-show="item.ishelp" class="help">
                                    <span>?</span>
                                    <p v-show="item.helptext" class="helptext">{{item.helptext}}</p>
                                </div>  
                            </div>
                        </li>
                    </ul>

js部分：

var CreateAccount={
    template:"#tpl_createAccount",
    data:function(){
        return {
            createAccount:{},
            selectStyle:{
                backgroundImage:'url(../image/account/icon_checkmark.png)',
                backgroundPosition:'center center',
                backgroundSize:'auto 100%',
                backgroundRepeat:'no-repeat'
            },
            selectedStyle:{
                backgroundImage:'url(../image/account/icon_checkmark_selected.png)',
                backgroundPosition:'center center',
                backgroundSize:'auto 100%',
                backgroundRepeat:'no-repeat'
            }
        }
    },
    computed:{
        unchecked:function(){
            return [true,true,true,true,true,true,true,true]
        },
        checked:function(){
            return [false,false,false,false,false,false,false,false]
        }
    },
    created:function(){
        this.$http.get("data/createaccount.json")
        .then(function(res){
            this.createAccount=res.data.data;
        });
    },
    methods:{
        changeStyle:function(e){
            var e=event||window.event;
            var tar=e.target.getAttribute("data-idx");
            Vue.set(this.unchecked,tar,false);
            Vue.set(this.checked,tar,true);
        },
        changeStyle1:function(e){
            var e=event||window.event;
            var tar=e.target.getAttribute("data-idx");
            Vue.set(this.unchecked,tar,true);
            Vue.set(this.checked,tar,false);
        }
    }
};

css就省略了。
绞尽脑汁，想到v-show的本质就是通过设置display:none实现元素的显隐，尽然这里v-show没办法做到，那就直接控制元素的display值吧。
于是改变代码：
html去掉v-show这一部分，如下：

<ul class="selectmenu">
                        <li v-for="(item,index) in createAccount.menu" class="col-md-3 col-xs-6" :key="index" :v-model="index">
                            <div class="item">
                                <div class="pic">
                                    <img :src="'image/account/'+item.img" alt="">
                                    <span :data-idx="index" class="selected" :style="selectStyle" @click="changeStyle()"></span>
                                    <span  :data-idx="index"  class="selected" :style="selectedStyle" @click="changeStyle1()"></span>
                                </div>
                                <p>{{item.text}}</p>
                                <div v-show="item.ishelp" class="help">
                                    <span>?</span>
                                    <p v-show="item.helptext" class="helptext">{{item.helptext}}</p>
                                </div>  
                            </div>
                        </li>
                    </ul>

js则在样式里添加上display，如下：

var CreateAccount={
    template:"#tpl_createAccount",
    data:function(){
        return {
            createAccount:{},
            selectStyle:{
                display:"block",
                backgroundImage:'url(../image/account/icon_checkmark.png)',
                backgroundPosition:'center center',
                backgroundSize:'auto 100%',
                backgroundRepeat:'no-repeat'
            },
            selectedStyle:{
                display:"none",
                backgroundImage:'url(../image/account/icon_checkmark_selected.png)',
                backgroundPosition:'center center',
                backgroundSize:'auto 100%',
                backgroundRepeat:'no-repeat'
            }
        }
    },
    computed:{
        unchecked:function(){
            return [true,true,true,true,true,true,true,true]
        },
        checked:function(){
            return [false,false,false,false,false,false,false,false]
        }
    },
    created:function(){
        this.$http.get("data/createaccount.json")
        .then(function(res){
            this.createAccount=res.data.data;
        });
    },
    methods:{
        changeStyle:function(e){
            var e=event||window.event;
            var tar=e.target.getAttribute("data-idx");
            Vue.set(this.unchecked,tar,false);
            Vue.set(this.checked,tar,true);
            this.selectStyle.display="none";
        },
        changeStyle1:function(e){
            var e=event||window.event;
            var tar=e.target.getAttribute("data-idx");
            Vue.set(this.unchecked,tar,true);
            Vue.set(this.checked,tar,false);
            this.selectStyle.display="block";
        }
    }
};

问题解决了吗？——————答案是：没-----有！
先不管样式是否完整，首先上述js代码中this.selectStyle依旧是组件中的全局变量，也就是会影响到所有的li里面的按钮，而并非仅仅是e.target。
再想办法吧！要改变的仅仅是e.target的。
直接设置e.target.style的值？当然啦，然而这里style要提前定义一下，不然会提醒你style未定义。
然后因为是两个span，一个是e.target，一个是e.target的替身（它的兄弟元素），需要把这个替身获取到。
中间过程省略，太伤心。
后来只是修改了js部分：

var CreateAccount={
    template:"#tpl_createAccount",
    data:function(){
        return {
            style:null,
            createAccount:{},
            selectStyle:{
                display:"block",
                backgroundImage:'url(../image/account/icon_checkmark.png)',
                backgroundPosition:'center center',
                backgroundSize:'auto 100%',
                backgroundRepeat:'no-repeat'
            },
            selectedStyle:{
                display:"none",
                backgroundImage:'url(../image/account/icon_checkmark_selected.png)',
                backgroundPosition:'center center',
                backgroundSize:'auto 100%',
                backgroundRepeat:'no-repeat'
            }
        }
    },
    computed:{
        unchecked:function(){
            return [true,true,true,true,true,true,true,true]
        },
        checked:function(){
            return [false,false,false,false,false,false,false,false]
        }
    },
    created:function(){
        this.$http.get("data/createaccount.json")
        .then(function(res){
            // console.log(res.data);
            this.createAccount=res.data.data;
        });
    },
    methods:{
        changeStyle:function(e){
            var e=event||window.event;
            var el=e.target;
            var tar=e.target.getAttribute("data-idx");
            var next=$(el).next()[0];
            Vue.set(this.unchecked,tar,false);
            Vue.set(this.checked,tar,true);
            e.target.style=this.selectStyle;
            e.target.style.display="none";
            next.style=this.selectedStyle;
            next.style.display="block";
            next.style.backgroundImage='url(../image/account/icon_checkmark_selected.png)',
            next.style.backgroundPosition='center center',
            next.style.backgroundSize='auto 100%',
            next.style.backgroundRepeat='no-repeat'
            this.selectStyle=next.style;
            // this.selectedStyle.display="block";
        },
        changeStyle1:function(e){
            var e=event||window.event;
            var el=e.target;
            var tar=e.target.getAttribute("data-idx");
            var pre=$(el).prev()[0];
            Vue.set(this.unchecked,tar,true);
            Vue.set(this.checked,tar,false);
            e.target.style=this.selectedStyle;
            pre.style.display="block";
            pre.style.backgroundImage='url(../image/account/icon_checkmark.png)',
            pre.style.backgroundPosition='center center',
            pre.style.backgroundSize='auto 100%',
            pre.style.backgroundRepeat='no-repeat'
            this.selectedStyle=pre.style;
        }
    }
};

很麻烦吧！我也觉得。曾尝试着删除一部分看似能删除的代码，结果是不能删。
你以为这样问题就解决了吗？只是解决了一部分。
第一次点击和第二次点击都没有问题（忽略那个报错吧，还木有想到办法避免，重要的是想要的结果出来了），但是第三次第四次点击的时候就没有效果啦。。。。。。问题出在哪里呢？就是第三次点击的时候e.target没有如愿变成第一个span，而且第一个span没有了样式。

....好吧，我能说在发布完文章后，我又去修改了一下代码，仅仅只是加了一行代码而已，问题就解决了吗？泪崩！

changeStyle1:function(e){
            var e=event||window.event;
            var el=e.target;
            var tar=e.target.getAttribute("data-idx");
            var pre=$(el).prev()[0];
            Vue.set(this.unchecked,tar,true);
            Vue.set(this.checked,tar,false);
            e.target.style=this.selectStyle;
            e.target.style.display="none";
            pre.style=this.selectedStyle;
            pre.style.display="block";
            pre.style.backgroundImage='url(../image/account/icon_checkmark.png)',
            pre.style.backgroundPosition='center center',
            pre.style.backgroundSize='auto 100%',
            pre.style.backgroundRepeat='no-repeat'
        }

就是那行e.target.style.display="none";
不过呢，还是觉得很麻烦，这些代码基本都是缺什么就添加什么添出来的。有没有小伙伴有更简单的办法呢？求分享咯!
————————————————————————————————
后来的优化：
https://www.jianshu.com/p/4fe1f4d90a5d