Stimulus.js + Vue.js

hello.vue

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

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

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

hello_controller.js

import { Controller } from "stimulus";

import Vue from "vue/dist/vue.esm";
import App from "../hello.vue";

export default class extends Controller {
  connect() {
    const el = this.element;
    const app = new Vue({
      el,
      render: h => h(App)
    });
  }
}

index.html.erb

<div data-controller="hello"></div>