VueJs Computed Element not updating

by Mohannad Najjar

HTML

<script src="//cdn.rawgit.com/jquery/jquery/2.1.4/dist/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
  <div id="message_container">
    <button @click="show = ! show">{{show ? 'hide': 'show'}}</button>
    <span class="message" v-if="show">message</span>
    <hr>
    <button @click="printComputedElement">
    Print Computed Element
    </button>
    <div></div>
  </div>

JavaScript

new Vue({
	el:'#message_container',
  data: () => {return {show: true}},
  methods: {
  	printComputedElement() {
    	console.log(this.messageElement)
    }
  },
  mounted() {
  },
  computed: {
  	messageElement () {
    	return $(this.$el).find('.message')
    }
  }
})