Bootstrap 3.0 Popover Sample

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div id="app">
  <keep-alive>
    <child></child>
  </keep-alive>
  <div>
    Message: <i>{{message}}</i>
  </div>    

  <button @click="message = 'updated'">
    Update
  </button>
</div>

CSS

#app {
  margin: 100px;
}

JavaScript

Vue.component('child', {
  template: '<div>I am a child</div>',
  activated: function() {
    this.$nextTick(() => {
    	console.log('in activated');
    });
  }
})

var vm = new Vue({
	el: '#app',
  data: function() {
  	return {
    	message: 'This is a test.'
    }
  },
  methods: {
  	changeText: function() {
    	this.message = 'changed';
    }
  },
  beforeCreate: function() {
    this.$nextTick(() => {
    	console.log('in beforeCreate');
    });
  },
  created: function() {
    this.$nextTick(() => {
    	console.log('in created');
    });
  },
  mounted: function() {
    this.$nextTick(() => {
    	console.log('in mounted');
    });
  },
  beforeUpdate: function() {
    this.$nextTick(() => {
    	console.log('in beforeUpdate');
    });
  },
  updated: function() {
    this.$nextTick(() => {
    	console.log('in updated');
    });
  },

});