你在组件定义中定义了toggle: true，在模板中使用了v-show='toggle'。但是你的css风格总是把display:none;添加到#hide元素中。

v-show是做什么的

当v-show中的条件求值为false时，它会将display: none内联样式添加到元素中，如果它的求值结果为true，它会删除display: none。更简单地说，它只是从元素样式中添加和删除display: none。它不会添加任何display: block或其他东西来使元素可见。
您的元素总是隐藏在您为#hide元素添加的CSS代码中。因此，即使v-show的计算结果为true，它也只是删除了添加的display: none内联样式。由于为#hide添加的样式，您的css代码将始终保留display: none。这意味着您的组件将始终隐藏。

修复

删除css样式，仅依赖于v-show='toggle'

工作小提琴

new Vue({
  el: '#app',
  data() {
    return {
      toggle: false
    }
  },
})

/* #hide {
  display:none;
} */

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id="app">
  <button @click='toggle = !toggle'> click here </button>
  <div id="hide" v-show='toggle'>showing</div>
</div>

如果你想切换元素，这是可行的。

<div>
  <div id="hide" class="btn" v-show='!toggle'>hiding</div>
  <div id="show" class="btn" v-show='toggle'>showing</div>
</div>