Vue 2.0 & Rails 5: Declarative Rendering not Reactive

Question

I am currently walking through the Vue guide with a Rails 5 app and found that I can update my Vue js object, but the DOM is not as described in the Declarative Rendering section..

The data and the DOM are now linked, and everything is now reactive. How do we know? Just open up your browser’s JavaScript console and set app.message to a different value. You should see the rendered example above update accordingly.

I am using the gem 'vuejs' found here: https://github.com/ytbryan/vuejs

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require vue2
//= require vue-router2
//= require vue-validator
//= require vuex
//= require_tree .

home.html.haml

#app
  %div
   {{ message }}

main.coffee

$(document).on "turbolinks:load", ->

   app = new Vue
     el: '#app'
     data: 
       message: 'Vue initialized!'

Chrome tools js console.. app.message = 'Should update to this'

Answer 1

The answer to this had to do with how coffeescript compiles it's variables. It inserts var to all variables not allowing them to be accessible by the global namespace. All that is required is the app to be a property of the window object.

$(document).on "turbolinks:load", ->

   window.app = new Vue
    el: '#app'
    data: 
      message: 'Vue initialized!'