Inicializar declarativamente un componente de JavaScript

1.-se creao nuevo archivo vue-test que contendra el script js correspondiente al vue que se encuentra el template vue-test.phtml
2.- se elimin   script correspondiente a vue js y se agrego nuevo tipo x-magento-init

Este tipo de declaracion se usa para modulos con script mas grandes o simplemente para hacer un modulo mas flexible al extraer el script del tamplate

code/JavaScriptDev/JsFun/view/frontend/templates/vue-test.phtml

@@ -1,14 +1,12 @@
 <div id="vue-test">
     <h1>{{ message }}</h1>
 </div>
-<script>
-    require(['vue'],function(Vue){
-    'use strict'
-        new Vue({
-            el:'#vue-test',
-            data:{
-                message : 'This is test LuisPC '
+<script type="text/x-magento-init">
+    {
+        "#vue-test":{
+            "JavaScriptDev_JsFun/js/vue-test":{
+                "message":"Declarative text"
             }
-        })
-    })
+        }
+    }
 </script>

code/JavaScriptDev/JsFun/view/frontend/web/js/vue-test.js

@@ -0,0 +1,13 @@
+define(['vue'],function(Vue){
+    'use strict'
+
+    return function(config){
+        return new Vue({
+            el:'#vue-test',
+            data:{
+                message : config.message
+            }
+        })
+    }
+
+    })