<NavBar>
  <Logo/>
  <NavBarUser v-if="isLoggedIn">
    {{ username }}</NavBarUser>
  <NavBarGroup v-else>
    <NavBarButton>Create an account</NavBarButton>
    <NavBarButton>Login</NavBarButton>
  </NavBarGroup>
</NavBar>

function render() {
  with (this) {
    return _c(
      'NavBar',
      [
        _c('Logo'),
        isLoggedIn
          ? _c('NavBarUser', [_v(_s(username))])
          : _c(
              'NavBarGroup',
              [_c('NavBarButton', [_v('Create an account')]), _c('NavBarButton', [_v('Login')])],
              1
            ),
      ],
      1
    );
  }
}

const vm = new Vue({
  // some options
})

vm.username = 'Jocelyn'

vm.messages.push({
  text: 'Yo!',
  author: 'Romeo'
})

<div id="app">
  <a v-on:click="currentView = 'Home'"
  >Home</a>
  <a v-on:click="currentView = 'About'"
  >About</a>
  <component v-bind:is="currentView"/>
</div>

Vue.component('Home', Home)
Vue.component('About', About)

new Vue({
  el: '#app',
  data: {
    currentView: 'Home'
  }
})

import Home from './views/Home'
import About from './views/About'

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent() {
      return routes[this.currentRoute] || NotFound
    }
  },
  methods: {
    goTo(path) {
      this.currentRoute = path
      window.history.pushState({}, '', path)
    }
  },
})

new Vue({
  // other options
  mounted() {
    window.addEventListener('popstate', () => {
      this.currentRoute = window.location.pathname
    })
  }
})

const routes = {
  '/': () => import('./views/Home'),
  '/about': () => import('./views/About')
}

<div id="app">
  <a href="/" v-on:click.prevent="goTo('/')">/</a>
  <a href="/about" v-on:click.prevent="goTo('/about')">/about</a>
  <component v-bind:is="ViewComponent" />
</div>

Vue.prototype.$goTo = function (path) {
  window.history.pushState({}, '', path)
}

const vm = new Vue({
  // other options
  data: {
    user: null,
    locale: 'en'
  }
})

// inside of a component
this.$root === vm
this.$root.user = { name: 'Jonathan' }

Object.defineProperty(Vue.prototype, '$state', {
  get () { return this.$root.$data }
})

// inside of a component
this.$state.user = {
  name: 'Jonathan'
}

Vue.prototype.login = async function (user, password) {
  this.$state.user =
    await authService.login(user, password)
  localStorage.setItem('user', this.$state.user)
})

new Vue({
  // other options
  created () {
    this.$state.user = localStorage.getItem('user')
  }
})

const sourceOfTruth = { name: 'Joseph' }

const vmA = new Vue({
  data: sourceOfTruth
})
const vmB = new Vue({
  data: sourceOfTruth
})
const vmC = new Vue({
  data: {
    // other data
    sourceOfTruth
  }
})