Vue：根据孩子隐藏父div

Question

我想根据所有子div的可见性隐藏父div。如果所有子项都隐藏了，我想隐藏父级div。

var app = new Vue({
  el: '#app',
  data: {
    selected: '',
    filtered: false
  },
  watch: {
    selected: function(val){
      this.filtered = (val != '')
    }
  }
});

.hide-me.hidden {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>
      I want to add a class .hidden to the .hide-me divs when all .item elements are hidden. Select "1" as option and you will see that the 2nd list has no vidsible items.
  </p>
  
  <select v-model="selected">
    <option value="">all</option>
    <option value="studio">studio</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>

  <div class="hide-me">
    <h4>1ste</h4>
    <div class="item" v-show="selected == 'studio' || !filtered ">
      studio
    </div>
    <div class="item"  v-show="selected == '1' || !filtered">
      1
    </div>
    <div class="item"  v-show="selected == '2' || !filtered">
      2
    </div>
    <div class="item"  v-show="selected == '2' || !filtered">
      2
    </div>
  </div>

  <div class="hide-me">
    <h4>2nd</h4>
    <div class="item"  v-show="selected == 'studio' || !filtered ">
      studio
    </div>
    <div class="item" v-show="selected == '2' || !filtered">
      2
    </div>
    <div class="item"  v-show="selected == '2' || !filtered">
      2
    </div>
  </div>
</div>