Estoy tratando de jugar con la nueva joya webpacker de Rails 5.1, junto con VueJS, pero no puedo obtener mis vistas erb para pasar datos a los componentes de VueJS ...

Digamos que tengo una vista de show de usuario

# view/users/show.html.erb
<%= javascript_pack_tag "user-card" %>
<%= content_tag :div,
  id: "user-card",
  data: {
    username: @user.name
  } do %>
<% end %>

Y mi javascript:

// app/javascript/packs/user-card.js
require("user-card")

// app/javascript/user-card/index.js
import Vue from 'vue/dist/vue.esm'
import UserCard from './components/UserCard'

document.addEventListener('DOMContentLoaded', () => {
  let element = document.getElementById("user-card")
  let username = element.dataset.username
  console.log(username); // => "pecpec"

  const app = new Vue({
    el: element,
    template: '<UserCard/>',
    components: { UserCard },
    data () {
      return { username }
    }
  })


// app/javascript/user-card/components/UserCard.vue
<template>
  <div>
    <h3>Hello {{ username }}</h3>
  </div>
</template>

<script>
export default {
  props: ['username'],
  data () {
    return {
      username: ""
    }
  }
}
</script>

He pasado algunas horas sobre esto, por ahora, pero ninguno de mis intentos ha tenido éxito. Intenté pasar los datos al componente como accesorio:props: ['username'], montaje del componente con

Vue.component(UserCard, {
  props: ['username']
  // or
  data () {
    return { username: username }
  }
})

... pero eso tampoco funcionó

Actualización: me faltabaprops: ['username'] en el componente y actualizó el código anterior en consecuencia, aunque eso no parece haber hecho una diferencia. Todavía no hay suerte!