What's wrong - props don't work in VUE + Ruby on Rails?

Question

Ruby on Rails

Unable to pass props to VUE.
In the vue console I get:

props:
    message: undefined

// views:

<div id="rails" class="container" data-behavior="vue">
  <app :message="<%= "Any text".to_json %>"></app>
</div>

// application.js

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const el = document.body.appendChild(document.createElement('application'))
  const app = new Vue({
  el: '[data-behavior="vue"]',
    render: h => h(App, 'app')
  })
})

// app.vue

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message'],
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

Everything that I could find on the Internet is done something like this, only using turbolinks.
With turbolinks, the root and app components are not displayed for me, and the console does not give an error.
Where am I making a mistake?

Answer 1

For those who have problems, here is the solution .