问：为什么同一个el使用不同v-model时，第二个v-model失效

今天开始学v-model时发现一个问题，当绑定同一个el时，第二个v-model失效
下面看例子

option1失效了（上面的是用sex做数据绑定）下面附上代码

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    
    <!--view层模板 -->
    <div class="app">

        性别：
        <input type="radio" name="sex" value="男" v-model="sex" >男
        <input type="radio" name="sex" value="女" v-model="sex">女

        <p>选中了谁：{{sex}}</p>
    </div>

    <div class="app">
        下拉框：
        <select v-model="option1">
            <option value="" disabled>---请选择---</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>

        </select>
        <span>value: {{option1}}</span>
    </div>

    <script>
        var vm = new Vue({
            el:".app",
            data:{
                sex:'男',
                option1:''
            },

        });
    </script>

后来我改成下面的方法，分别用一个对象进行绑定，但觉得好冗余，有其他办法吗？

代码块：

   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    
    <!--view层模板 -->
    <div class="app">

        性别：
        <input type="radio" name="sex" value="男" v-model="sex" >男
        <input type="radio" name="sex" value="女" v-model="sex">女

        <p>选中了谁：{{sex}}</p>
    </div>

    <div class="app1">
        下拉框：
        <select v-model="option1">
            <option value="" disabled>---请选择---</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>

        </select>
        <span>value: {{option1}}</span>
    </div>

    <script>
        var vm = new Vue({
            el:".app",
            data:{
                sex:'男',
            },

        });
        var vm2 = new Vue({
            el:".app1",
            data:{
                option1:'',
            },

        });
    </script>