如何在vue.js中的更改单选按钮上从父div添加/删除类

我有一个简单的代码：

    <div id="app">
<div class="xyz" :class="{ selectedRadio:radio_first }">
  <input type="radio" name="example" @change="radio_first = true;radio_second = false">
</div>

<div class="abc" :class="{ selectedRadio:radio_second }">
  <input type="radio" name="example" @change="radio_second = true;radio_first = false">
</div>
</div>

然后：

    new Vue({

      el:"#app",
      data:{
        radio_first:false,
        radio_second:false
      }


});

CSS：

    .xyz{
  display:inline;
  padding:20px;
  border:1px solid grey;
  margin-right:60px;
}

.abc{
  border:1px solid grey;
  display:inline;
  padding:20px;
}

.selectedRadio{
    background: lightgreen;
}

因此，如果我选中第一个单选按钮，则只想向其父div添加一个新类。如果我检查第二个收音机，则需要向其父div添加一个类，并将该第一个添加的类删除到第一个收音机的父div中。我希望你们能理解我想要的。到目前为止，我已经尝试过了。它正在工作，但是如果我将有很多单选按钮怎么办？vue js是否有更好的方法来解决这个问题？这是codepen链接：https ://codepen.io/kohalirakesh/pen/KoPMEZ谢谢。