vue如何实现选择选项？

Question

如下代码所示，触发任何一个选项的方法，会导致其他选项一起改变，请问如何改进？

<template>
    <div class="wrapper">
        <div class="item" @click="select()">
            <span v-if="selected">被选中了</span>
            <span v-else>没被选中</span>
        </div>
        <div class="item" @click="select()">
            <span v-if="selected">被选中了</span>
            <span v-else>没被选中</span>
        </div>
        <div class="item" @click="select()">
            <span v-if="selected">被选中了</span>
            <span v-else>没被选中</span>
        </div>                
    </div>
</template>

<script>
    export default{
        data(){
            return{
                selected: false,
            } 
        },
        method:{
            select(){
                this.selected = !this.selected;
            }
        },
    }
</script>

Answer 1

<template>
    <div class="wrapper">
        <div class="item" @click="select(1)">
            <span v-if="selected === 1">被选中了</span>
            <span v-else>没被选中</span>
        </div>
        <div class="item" @click="select(2)">
            <span v-if="selected === 2">被选中了</span>
            <span v-else>没被选中</span>
        </div>
        <div class="item" @click="select(3)">
            <span v-if="selected === 3">被选中了</span>
            <span v-else>没被选中</span>
        </div>                
    </div>
</template>

<script>
    export default{
        data(){
            return{
                selected: '',
            } 
        },
        method:{
            select(id){
                this.selected = id;
            }
        },
    }
</script>