diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 7d6957b53d..99a74061aa 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -29,13 +29,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-ref-component\\",
-
   props: [\\"showInput\\"],
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -44,7 +41,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -53,7 +49,6 @@ export default defineComponent({
       };
     },
   },
-
   methods: {
     onBlur: function onBlur() {
       // Maintain focus
@@ -93,11 +88,9 @@ export const DEFAULT_VALUES = {
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   data() {
     return { name: \\"Steve\\", age: 1, sports: [\\"\\"], DEFAULT_VALUES };
   },
-
   methods: {
     underscore_fn_name() {
       return \\"bar\\";
@@ -134,7 +127,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-for-show-component\\",
-
   data() {
     return { name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] };
   },
@@ -158,11 +150,9 @@ import { createInjector, Injector, MyService } from \\"@dummy/injection-js\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
-
   provide() {
     const _this = this;
     return {
@@ -180,7 +170,6 @@ export default defineComponent({
     const bye = this.myService.method(\\"hi\\");
     console.log(bye);
   },
-
   methods: {
     onChange: function onChange() {
       const change = this.myService.method(\\"change\\");
@@ -201,13 +190,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-on-mount-update-component\\",
-
   props: [\\"hi\\", \\"bye\\"],
-
   data() {
     return { name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] };
   },
-
   created() {
     this.name = \\"PatrickJS onInit\\" + this.hi;
   },
@@ -228,13 +214,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-outputs-component\\",
-
   props: [\\"onMessage\\", \\"onEvent\\", \\"message\\"],
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
-
   mounted() {
     this.onMessage(this.name);
     this.onEvent(this.message);
@@ -253,13 +236,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-outputs-component\\",
-
   props: [\\"onMessage\\", \\"onEvent\\", \\"message\\"],
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
-
   mounted() {
     this.onMessage(this.name);
     this.onEvent(this.message);
@@ -336,7 +316,6 @@ export default defineComponent({
     MyBasicComponent: MyBasicComponent,
     MyBasicOnMountUpdateComponent: MyBasicOnMountUpdateComponent,
   },
-
   data() {
     return { name: \\"Steve\\", dev: \\"PatrickJS\\" };
   },
@@ -363,11 +342,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-for-component\\",
-
   data() {
     return { name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] };
   },
-
   mounted() {
     console.log(\\"onMount code\\");
   },
@@ -404,13 +381,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-ref-component\\",
-
   props: [\\"showInput\\"],
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
-
   methods: {
     onBlur: function onBlur() {
       // Maintain focus
@@ -442,7 +416,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-ref-assignment-component\\",
-
   methods: {
     handlerClick: function handlerClick(event) {
       event.preventDefault();
@@ -480,11 +453,9 @@ export function usePrevious(value) {
 
 export default defineComponent({
   name: \\"my-previous-component\\",
-
   data() {
     return { count: 0 };
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -493,7 +464,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -531,7 +501,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"button\\",
-
   props: [\\"link\\", \\"attributes\\", \\"openLinkInNewTab\\", \\"text\\"],
 });
 </script>"
@@ -555,9 +524,7 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"column\\",
-
   props: [\\"columns\\", \\"space\\"],
-
   methods: {
     getColumns() {
       return this.columns || [];
@@ -651,13 +618,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"content-slot-jsx-code\\",
-
   props: { attributes: { default: undefined }, content: { default: \\"\\" } },
-
   data() {
     return { name: \\"king\\", showContent: false };
   },
-
   computed: {
     cls() {
       return this.$slots.content && this.$slots.default
@@ -665,7 +629,6 @@ export default defineComponent({
         : \\"\\";
     },
   },
-
   methods: {
     show() {
       this.$slots.content ? 1 : \\"\\";
@@ -704,17 +667,13 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"custom-code\\",
-
   props: [\\"replaceNodes\\", \\"code\\"],
-
   data() {
     return { scriptsInserted: [], scriptsRun: [] };
   },
-
   mounted() {
     this.findAndRunScripts();
   },
-
   methods: {
     findAndRunScripts() {
       // TODO: Move this function to standalone one in '@builder.io/utils'
@@ -791,17 +750,13 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"custom-code\\",
-
   props: [\\"replaceNodes\\", \\"code\\"],
-
   data() {
     return { scriptsInserted: [], scriptsRun: [] };
   },
-
   mounted() {
     this.findAndRunScripts();
   },
-
   methods: {
     findAndRunScripts() {
       // TODO: Move this function to standalone one in '@builder.io/utils'
@@ -946,7 +901,6 @@ export default defineComponent({
     \\"sendingMessage\\",
     \\"successMessage\\",
   ],
-
   data() {
     return {
       formState: \\"unsubmitted\\",
@@ -955,13 +909,11 @@ export default defineComponent({
       builder,
     };
   },
-
   computed: {
     submissionState() {
       return (Builder.isEditing && this.previewState) || this.formState;
     },
   },
-
   methods: {
     onSubmit(event) {
       const sendWithJs = this.sendWithJs || this.sendSubmissionsTo === \\"email\\";
@@ -1220,13 +1172,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"image\\",
-
   props: [\\"lazy\\", \\"altText\\", \\"_class\\", \\"image\\", \\"srcset\\", \\"sizes\\"],
-
   data() {
     return { scrollListener: null, imageLoaded: false, load: false };
   },
-
   mounted() {
     if (this.useLazyLoading()) {
       // throttled scroll capture listener
@@ -1251,13 +1200,11 @@ export default defineComponent({
       listener();
     }
   },
-
   unmounted() {
     if (this.scrollListener) {
       window.removeEventListener(\\"scroll\\", this.scrollListener);
     }
   },
-
   methods: {
     setLoaded() {
       this.imageLoaded = true;
@@ -1309,7 +1256,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"img-state-component\\",
-
   data() {
     return { canShow: true, images: [\\"http://example.com/qwik.png\\"] };
   },
@@ -1338,7 +1284,6 @@ import { Builder } from \\"@builder.io/sdk\\";
 
 export default defineComponent({
   name: \\"img-component\\",
-
   props: [
     \\"backgroundSize\\",
     \\"backgroundPosition\\",
@@ -1371,7 +1316,6 @@ import { Builder } from \\"@builder.io/sdk\\";
 
 export default defineComponent({
   name: \\"form-input-component\\",
-
   props: [
     \\"attributes\\",
     \\"defaultValue\\",
@@ -1398,9 +1342,7 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"raw-text\\",
-
   props: [\\"attributes\\", \\"text\\"],
-
   methods: {
     _classStringToObject(str) {
       const obj = {};
@@ -1439,7 +1381,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"section-component\\",
-
   props: [\\"attributes\\", \\"maxWidth\\"],
 });
 </script>"
@@ -1465,9 +1406,7 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"section-state-component\\",
-
   props: [\\"attributes\\"],
-
   data() {
     return { max: 42, items: [42] };
   },
@@ -1502,7 +1441,6 @@ import { Builder } from \\"@builder.io/sdk\\";
 
 export default defineComponent({
   name: \\"select-component\\",
-
   props: [\\"attributes\\", \\"value\\", \\"defaultValue\\", \\"name\\", \\"options\\"],
 });
 </script>"
@@ -1634,13 +1572,10 @@ import { kebabCase, snakeCase } from \\"lodash\\";
 
 export default defineComponent({
   name: \\"smile-reviews\\",
-
   props: [\\"apiKey\\", \\"productId\\"],
-
   data() {
     return { reviews: [], name: \\"test\\", showReviewPrompt: false };
   },
-
   mounted() {
     fetch(
       \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
@@ -1652,7 +1587,6 @@ export default defineComponent({
         this.reviews = data.data;
       });
   },
-
   methods: {
     kebabCaseValue() {
       return kebabCase(\\"testThat\\");
@@ -1713,7 +1647,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"submit-button\\",
-
   props: [\\"attributes\\", \\"text\\"],
 });
 </script>"
@@ -1737,9 +1670,7 @@ import { Builder } from \\"@builder.io/sdk\\";
 
 export default defineComponent({
   name: \\"text\\",
-
   props: [\\"text\\", \\"content\\"],
-
   data() {
     return { name: \\"Decadef20\\" };
   },
@@ -1763,7 +1694,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"textarea\\",
-
   props: [\\"attributes\\", \\"placeholder\\", \\"name\\", \\"value\\", \\"defaultValue\\"],
 });
 </script>"
@@ -1798,7 +1728,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"video\\",
-
   props: [
     \\"attributes\\",
     \\"fit\\",
@@ -1824,11 +1753,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { name: \\"steve\\" };
   },
-
   methods: {
     setName(value) {
       this.name = value;
@@ -1857,13 +1784,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-for-no-tag-ref-component\\",
-
   props: [\\"actions\\"],
-
   data() {
     return { name: \\"VincentW\\", TagName: \\"div\\", tag: \\"span\\" };
   },
-
   computed: {
     TagNameGetter() {
       return \\"span\\";
@@ -1890,9 +1814,7 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-forward-ref-component\\",
-
   props: [\\"inputRef\\"],
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
@@ -1923,9 +1845,7 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-forward-ref-component\\",
-
   props: [\\"inputRef\\"],
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
@@ -1949,11 +1869,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-on-update-return-component\\",
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -1975,7 +1893,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -2063,11 +1980,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"class-name-code\\",
-
   data() {
     return { bindings: \\"a binding\\" };
   },
-
   methods: {
     _classStringToObject(str) {
       const obj = {};
@@ -2097,7 +2012,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   data() {
     return {
       classState: \\"testClassName\\",
@@ -2106,7 +2020,6 @@ export default defineComponent({
       },
     };
   },
-
   methods: {
     _classStringToObject(str) {
       const obj = {};
@@ -2143,9 +2056,7 @@ import Context2 from \\"@dummy/2\\";
 
 export default defineComponent({
   name: \\"component-with-context\\",
-
   props: [\\"content\\"],
-
   provide() {
     const _this = this;
     return {
@@ -2181,9 +2092,7 @@ import Context2 from \\"@dummy/2\\";
 
 export default defineComponent({
   name: \\"component-with-context\\",
-
   props: [\\"content\\"],
-
   provide() {
     const _this = this;
     return {
@@ -2217,7 +2126,6 @@ export default defineComponent({
   name: \\"render-content\\",
   components: { BuilderContext: BuilderContext },
   props: [\\"content\\", \\"customComponents\\"],
-
   provide() {
     const _this = this;
     return {
@@ -2257,7 +2165,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"button\\",
-
   props: {
     link: { default: \\"https://builder.io/\\" },
     attributes: { default: undefined },
@@ -2300,7 +2207,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"button\\",
-
   props: {
     link: { default: \\"https://builder.io/\\" },
     attributes: { default: undefined },
@@ -2326,9 +2232,7 @@ const DEFAULT_VALUES = {
 
 export default defineComponent({
   name: \\"component-with-types\\",
-
   props: [\\"name\\"],
-
   data() {
     return { DEFAULT_VALUES };
   },
@@ -2346,9 +2250,7 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   props: [\\"componentRef\\"],
-
   data() {
     return {
       refToUse: !(this.componentRef instanceof Function)
@@ -2376,7 +2278,6 @@ export default defineComponent({
   name: \\"render-content\\",
   components: { RenderBlock: RenderBlock },
   props: [\\"renderContentProps\\"],
-
   methods: {
     getRenderContentProps(block, index) {
       return {
@@ -2399,7 +2300,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"multiple-on-update\\",
-
   updated() {
     console.log(\\"Runs on every update/rerender\\");
     console.log(\\"Runs on every update/rerender as well\\");
@@ -2418,11 +2318,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"multiple-on-update-with-deps\\",
-
   data() {
     return { a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" };
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -2445,7 +2343,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -2474,7 +2371,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   data() {
     return {
       attrs: {
@@ -2500,7 +2396,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"nested-show\\",
-
   props: [\\"conditionA\\", \\"conditionB\\"],
 });
 </script>"
@@ -2558,7 +2453,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"on-init\\",
-
   created() {
     console.log(\\"onInit\\");
   },
@@ -2583,13 +2477,10 @@ export const defaultValues = {
 
 export default defineComponent({
   name: \\"on-init\\",
-
   props: [\\"name\\"],
-
   data() {
     return { name: \\"\\" };
   },
-
   created() {
     this.name = defaultValues.name || this.name;
     console.log(\\"set defaults with props\\");
@@ -2608,11 +2499,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"comp\\",
-
   mounted() {
     console.log(\\"Runs on mount\\");
   },
-
   unmounted() {
     console.log(\\"Runs on unMount\\");
   },
@@ -2630,7 +2519,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"on-update\\",
-
   updated() {
     console.log(\\"Runs on every update/rerender\\");
   },
@@ -2648,13 +2536,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"on-update-with-deps\\",
-
   props: [\\"size\\"],
-
   data() {
     return { a: \\"a\\", b: \\"b\\" };
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -2668,7 +2553,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -2712,7 +2596,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   props: [\\"name\\"],
 });
 </script>"
@@ -2731,9 +2614,7 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   props: [\\"type\\"],
-
   data() {
     return { name: \\"Decadef20\\" };
   },
@@ -2751,7 +2632,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   props: [\\"name\\"],
 });
 </script>"
@@ -2767,7 +2647,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   props: [\\"name\\"],
 });
 </script>"
@@ -2783,13 +2662,11 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"on-update\\",
-
   updated() {
     this.foo({
       someOption: this.bar,
     });
   },
-
   methods: {
     foo: function foo(params) {},
     bar: function bar() {},
@@ -2869,11 +2746,9 @@ export default defineComponent({
     RenderComponent: RenderComponent,
   },
   props: [\\"block\\", \\"context\\"],
-
   data() {
     return { isEmptyHtmlElement };
   },
-
   computed: {
     component() {
       const componentName = getProcessedBlock({
@@ -3074,11 +2949,9 @@ export default defineComponent({
   name: \\"render-content\\",
   components: { RenderBlocks: RenderBlocks, BuilderContext: BuilderContext },
   props: [\\"content\\", \\"customComponents\\"],
-
   data() {
     return { trackClick };
   },
-
   provide() {
     const _this = this;
     return {
@@ -3092,11 +2965,9 @@ export default defineComponent({
       },
     };
   },
-
   mounted() {
     sendComponentsToVisualEditor(this.customComponents);
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -3105,7 +2976,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -3150,7 +3020,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"button\\",
-
   props: [\\"link\\", \\"attributes\\", \\"openLinkInNewTab\\", \\"text\\"],
 });
 </script>"
@@ -3167,7 +3036,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"render-styles\\",
-
   props: [\\"foo\\"],
 });
 </script>"
@@ -3189,7 +3057,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   props: [\\"name\\"],
 });
 </script>"
@@ -3214,7 +3081,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   props: [\\"name\\"],
 });
 </script>"
@@ -3233,7 +3099,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"nested-show\\",
-
   props: [\\"conditionA\\", \\"items\\"],
 });
 </script>"
@@ -3251,7 +3116,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"show-root-text\\",
-
   props: [\\"conditionA\\"],
 });
 </script>"
@@ -3281,7 +3145,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   props: [\\"nested\\"],
 });
 </script>"
@@ -3390,7 +3253,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"type-dependency\\",
-
   props: [\\"foo\\"],
 });
 </script>"
@@ -3478,7 +3340,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"use-target-component\\",
-
   computed: {
     name() {
       const prefix = \\"v2\\";
@@ -3499,7 +3360,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
@@ -3540,13 +3400,10 @@ export interface Props {
 
 export default defineComponent({
   name: \\"my-basic-ref-component\\",
-
   props: [\\"showInput\\"],
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -3555,7 +3412,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -3564,7 +3420,6 @@ export default defineComponent({
       };
     },
   },
-
   methods: {
     onBlur: function onBlur() {
       // Maintain focus
@@ -3608,11 +3463,9 @@ export interface MyBasicComponentProps {
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   data() {
     return { name: \\"Steve\\", age: 1, sports: [\\"\\"], DEFAULT_VALUES };
   },
-
   methods: {
     underscore_fn_name() {
       return \\"bar\\";
@@ -3649,7 +3502,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-for-show-component\\",
-
   data() {
     return { name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] };
   },
@@ -3673,11 +3525,9 @@ import { createInjector, Injector, MyService } from \\"@dummy/injection-js\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
-
   provide() {
     const _this = this;
     return {
@@ -3695,7 +3545,6 @@ export default defineComponent({
     const bye = this.myService.method(\\"hi\\");
     console.log(bye);
   },
-
   methods: {
     onChange: function onChange() {
       const change = this.myService.method(\\"change\\");
@@ -3721,13 +3570,10 @@ export interface Props {
 
 export default defineComponent({
   name: \\"my-basic-on-mount-update-component\\",
-
   props: [\\"hi\\", \\"bye\\"],
-
   data() {
     return { name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] };
   },
-
   created() {
     this.name = \\"PatrickJS onInit\\" + this.hi;
   },
@@ -3748,13 +3594,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-outputs-component\\",
-
   props: [\\"onMessage\\", \\"onEvent\\", \\"message\\"],
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
-
   mounted() {
     this.onMessage(this.name);
     this.onEvent(this.message);
@@ -3773,13 +3616,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-outputs-component\\",
-
   props: [\\"onMessage\\", \\"onEvent\\", \\"message\\"],
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
-
   mounted() {
     this.onMessage(this.name);
     this.onEvent(this.message);
@@ -3861,7 +3701,6 @@ export default defineComponent({
     MyBasicComponent: MyBasicComponent,
     MyBasicOnMountUpdateComponent: MyBasicOnMountUpdateComponent,
   },
-
   data() {
     return { name: \\"Steve\\", dev: \\"PatrickJS\\" };
   },
@@ -3888,11 +3727,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-for-component\\",
-
   data() {
     return { name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] };
   },
-
   mounted() {
     console.log(\\"onMount code\\");
   },
@@ -3933,13 +3770,10 @@ export interface Props {
 
 export default defineComponent({
   name: \\"my-basic-ref-component\\",
-
   props: [\\"showInput\\"],
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
-
   methods: {
     onBlur: function onBlur() {
       // Maintain focus
@@ -3975,7 +3809,6 @@ export interface Props {
 
 export default defineComponent({
   name: \\"my-basic-ref-assignment-component\\",
-
   methods: {
     handlerClick: function handlerClick(event: Event) {
       event.preventDefault();
@@ -4017,11 +3850,9 @@ export interface Props {
 
 export default defineComponent({
   name: \\"my-previous-component\\",
-
   data() {
     return { count: 0 };
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -4030,7 +3861,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -4075,7 +3905,6 @@ export interface ButtonProps {
 
 export default defineComponent({
   name: \\"button\\",
-
   props: [\\"link\\", \\"attributes\\", \\"openLinkInNewTab\\", \\"text\\"],
 });
 </script>"
@@ -4114,9 +3943,7 @@ export interface ColumnProps {
 
 export default defineComponent({
   name: \\"column\\",
-
   props: [\\"columns\\", \\"space\\"],
-
   methods: {
     getColumns() {
       return this.columns || [];
@@ -4223,13 +4050,10 @@ type Props = {
 
 export default defineComponent({
   name: \\"content-slot-jsx-code\\",
-
   props: { attributes: { default: undefined }, content: { default: \\"\\" } },
-
   data() {
     return { name: \\"king\\", showContent: false };
   },
-
   computed: {
     cls() {
       return this.$slots.content && this.$slots.default
@@ -4237,7 +4061,6 @@ export default defineComponent({
         : \\"\\";
     },
   },
-
   methods: {
     show() {
       this.$slots.content ? 1 : \\"\\";
@@ -4281,17 +4104,13 @@ export interface CustomCodeProps {
 
 export default defineComponent({
   name: \\"custom-code\\",
-
   props: [\\"replaceNodes\\", \\"code\\"],
-
   data() {
     return { scriptsInserted: [], scriptsRun: [] };
   },
-
   mounted() {
     this.findAndRunScripts();
   },
-
   methods: {
     findAndRunScripts() {
       // TODO: Move this function to standalone one in '@builder.io/utils'
@@ -4373,17 +4192,13 @@ export interface CustomCodeProps {
 
 export default defineComponent({
   name: \\"custom-code\\",
-
   props: [\\"replaceNodes\\", \\"code\\"],
-
   data() {
     return { scriptsInserted: [], scriptsRun: [] };
   },
-
   mounted() {
     this.findAndRunScripts();
   },
-
   methods: {
     findAndRunScripts() {
       // TODO: Move this function to standalone one in '@builder.io/utils'
@@ -4552,7 +4367,6 @@ export default defineComponent({
     \\"sendingMessage\\",
     \\"successMessage\\",
   ],
-
   data() {
     return {
       formState: \\"unsubmitted\\",
@@ -4561,13 +4375,11 @@ export default defineComponent({
       builder,
     };
   },
-
   computed: {
     submissionState() {
       return (Builder.isEditing && this.previewState) || this.formState;
     },
   },
-
   methods: {
     onSubmit(
       event: Event & {
@@ -4852,13 +4664,10 @@ export interface ImageProps {
 
 export default defineComponent({
   name: \\"image\\",
-
   props: [\\"lazy\\", \\"altText\\", \\"_class\\", \\"image\\", \\"srcset\\", \\"sizes\\"],
-
   data() {
     return { scrollListener: null, imageLoaded: false, load: false };
   },
-
   mounted() {
     if (this.useLazyLoading()) {
       // throttled scroll capture listener
@@ -4883,13 +4692,11 @@ export default defineComponent({
       listener();
     }
   },
-
   unmounted() {
     if (this.scrollListener) {
       window.removeEventListener(\\"scroll\\", this.scrollListener);
     }
   },
-
   methods: {
     setLoaded() {
       this.imageLoaded = true;
@@ -4941,7 +4748,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"img-state-component\\",
-
   data() {
     return { canShow: true, images: [\\"http://example.com/qwik.png\\"] };
   },
@@ -4987,7 +4793,6 @@ export interface ImgProps {
 
 export default defineComponent({
   name: \\"img-component\\",
-
   props: [
     \\"backgroundSize\\",
     \\"backgroundPosition\\",
@@ -5030,7 +4835,6 @@ export interface FormInputProps {
 
 export default defineComponent({
   name: \\"form-input-component\\",
-
   props: [
     \\"attributes\\",
     \\"defaultValue\\",
@@ -5062,9 +4866,7 @@ export interface RawTextProps {
 
 export default defineComponent({
   name: \\"raw-text\\",
-
   props: [\\"attributes\\", \\"text\\"],
-
   methods: {
     _classStringToObject(str: string) {
       const obj: Record<string, boolean> = {};
@@ -5109,7 +4911,6 @@ export interface SectionProps {
 
 export default defineComponent({
   name: \\"section-component\\",
-
   props: [\\"attributes\\", \\"maxWidth\\"],
 });
 </script>"
@@ -5141,9 +4942,7 @@ export interface SectionProps {
 
 export default defineComponent({
   name: \\"section-state-component\\",
-
   props: [\\"attributes\\"],
-
   data() {
     return { max: 42, items: [42] };
   },
@@ -5189,7 +4988,6 @@ export interface FormSelectProps {
 
 export default defineComponent({
   name: \\"select-component\\",
-
   props: [\\"attributes\\", \\"value\\", \\"defaultValue\\", \\"name\\", \\"options\\"],
 });
 </script>"
@@ -5342,13 +5140,10 @@ type SmileReviewsProps = {
 
 export default defineComponent({
   name: \\"smile-reviews\\",
-
   props: [\\"apiKey\\", \\"productId\\"],
-
   data() {
     return { reviews: [], name: \\"test\\", showReviewPrompt: false };
   },
-
   mounted() {
     fetch(
       \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
@@ -5360,7 +5155,6 @@ export default defineComponent({
         this.reviews = data.data;
       });
   },
-
   methods: {
     kebabCaseValue() {
       return kebabCase(\\"testThat\\");
@@ -5426,7 +5220,6 @@ export interface ButtonProps {
 
 export default defineComponent({
   name: \\"submit-button\\",
-
   props: [\\"attributes\\", \\"text\\"],
 });
 </script>"
@@ -5458,9 +5251,7 @@ export interface TextProps {
 
 export default defineComponent({
   name: \\"text\\",
-
   props: [\\"text\\", \\"content\\"],
-
   data() {
     return { name: \\"Decadef20\\" };
   },
@@ -5492,7 +5283,6 @@ export interface TextareaProps {
 
 export default defineComponent({
   name: \\"textarea\\",
-
   props: [\\"attributes\\", \\"placeholder\\", \\"name\\", \\"value\\", \\"defaultValue\\"],
 });
 </script>"
@@ -5553,7 +5343,6 @@ export interface VideoProps {
 
 export default defineComponent({
   name: \\"video\\",
-
   props: [
     \\"attributes\\",
     \\"fit\\",
@@ -5579,11 +5368,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { name: \\"steve\\" };
   },
-
   methods: {
     setName(value) {
       this.name = value;
@@ -5612,13 +5399,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-for-no-tag-ref-component\\",
-
   props: [\\"actions\\"],
-
   data() {
     return { name: \\"VincentW\\", TagName: \\"div\\", tag: \\"span\\" };
   },
-
   computed: {
     TagNameGetter() {
       return \\"span\\";
@@ -5650,9 +5434,7 @@ export interface Props {
 
 export default defineComponent({
   name: \\"my-basic-forward-ref-component\\",
-
   props: [\\"inputRef\\"],
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
@@ -5688,9 +5470,7 @@ export interface Props {
 
 export default defineComponent({
   name: \\"my-basic-forward-ref-component\\",
-
   props: [\\"inputRef\\"],
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
@@ -5714,11 +5494,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-on-update-return-component\\",
-
   data() {
     return { name: \\"PatrickJS\\" };
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -5740,7 +5518,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -5835,11 +5612,9 @@ type Props = {
 
 export default defineComponent({
   name: \\"class-name-code\\",
-
   data() {
     return { bindings: \\"a binding\\" };
   },
-
   methods: {
     _classStringToObject(str: string) {
       const obj: Record<string, boolean> = {};
@@ -5869,7 +5644,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   data() {
     return {
       classState: \\"testClassName\\",
@@ -5878,7 +5652,6 @@ export default defineComponent({
       },
     };
   },
-
   methods: {
     _classStringToObject(str: string) {
       const obj: Record<string, boolean> = {};
@@ -5919,9 +5692,7 @@ export interface ComponentWithContextProps {
 
 export default defineComponent({
   name: \\"component-with-context\\",
-
   props: [\\"content\\"],
-
   provide() {
     const _this = this;
     return {
@@ -5961,9 +5732,7 @@ export interface ComponentWithContextProps {
 
 export default defineComponent({
   name: \\"component-with-context\\",
-
   props: [\\"content\\"],
-
   provide() {
     const _this = this;
     return {
@@ -5997,7 +5766,6 @@ export default defineComponent({
   name: \\"render-content\\",
   components: { BuilderContext: BuilderContext },
   props: [\\"content\\", \\"customComponents\\"],
-
   provide() {
     const _this = this;
     return {
@@ -6047,7 +5815,6 @@ export interface ButtonProps {
 
 export default defineComponent({
   name: \\"button\\",
-
   props: {
     link: { default: \\"https://builder.io/\\" },
     attributes: { default: undefined },
@@ -6098,7 +5865,6 @@ export interface ButtonProps {
 
 export default defineComponent({
   name: \\"button\\",
-
   props: {
     link: { default: \\"https://builder.io/\\" },
     attributes: { default: undefined },
@@ -6128,9 +5894,7 @@ type Props = {
 
 export default defineComponent({
   name: \\"component-with-types\\",
-
   props: [\\"name\\"],
-
   data() {
     return { DEFAULT_VALUES };
   },
@@ -6148,9 +5912,7 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   props: [\\"componentRef\\"],
-
   data() {
     return {
       refToUse: !(this.componentRef instanceof Function)
@@ -6185,7 +5947,6 @@ export default defineComponent({
   name: \\"render-content\\",
   components: { RenderBlock: RenderBlock },
   props: [\\"renderContentProps\\"],
-
   methods: {
     getRenderContentProps(block, index) {
       return {
@@ -6208,7 +5969,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"multiple-on-update\\",
-
   updated() {
     console.log(\\"Runs on every update/rerender\\");
     console.log(\\"Runs on every update/rerender as well\\");
@@ -6227,11 +5987,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"multiple-on-update-with-deps\\",
-
   data() {
     return { a: \\"a\\", b: \\"b\\", c: \\"c\\", d: \\"d\\" };
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -6254,7 +6012,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -6283,7 +6040,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   data() {
     return {
       attrs: {
@@ -6314,7 +6070,6 @@ interface Props {
 
 export default defineComponent({
   name: \\"nested-show\\",
-
   props: [\\"conditionA\\", \\"conditionB\\"],
 });
 </script>"
@@ -6372,7 +6127,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"on-init\\",
-
   created() {
     console.log(\\"onInit\\");
   },
@@ -6401,13 +6155,10 @@ type Props = {
 
 export default defineComponent({
   name: \\"on-init\\",
-
   props: [\\"name\\"],
-
   data() {
     return { name: \\"\\" };
   },
-
   created() {
     this.name = defaultValues.name || this.name;
     console.log(\\"set defaults with props\\");
@@ -6426,11 +6177,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"comp\\",
-
   mounted() {
     console.log(\\"Runs on mount\\");
   },
-
   unmounted() {
     console.log(\\"Runs on unMount\\");
   },
@@ -6448,7 +6197,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"on-update\\",
-
   updated() {
     console.log(\\"Runs on every update/rerender\\");
   },
@@ -6470,13 +6218,10 @@ type Props = {
 
 export default defineComponent({
   name: \\"on-update-with-deps\\",
-
   props: [\\"size\\"],
-
   data() {
     return { a: \\"a\\", b: \\"b\\" };
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -6490,7 +6235,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -6557,7 +6301,6 @@ export interface MyBasicComponentProps {
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   props: [\\"name\\"],
 });
 </script>"
@@ -6581,9 +6324,7 @@ type Props = {
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   props: [\\"type\\"],
-
   data() {
     return { name: \\"Decadef20\\" };
   },
@@ -6606,7 +6347,6 @@ interface Person {
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   props: [\\"name\\"],
 });
 </script>"
@@ -6627,7 +6367,6 @@ type Person = {
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   props: [\\"name\\"],
 });
 </script>"
@@ -6643,13 +6382,11 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"on-update\\",
-
   updated() {
     this.foo({
       someOption: this.bar,
     });
   },
-
   methods: {
     foo: function foo(params) {},
     bar: function bar() {},
@@ -6742,11 +6479,9 @@ export default defineComponent({
     RenderComponent: RenderComponent,
   },
   props: [\\"block\\", \\"context\\"],
-
   data() {
     return { isEmptyHtmlElement };
   },
-
   computed: {
     component() {
       const componentName = getProcessedBlock({
@@ -6955,11 +6690,9 @@ export default defineComponent({
   name: \\"render-content\\",
   components: { RenderBlocks: RenderBlocks, BuilderContext: BuilderContext },
   props: [\\"content\\", \\"customComponents\\"],
-
   data() {
     return { trackClick };
   },
-
   provide() {
     const _this = this;
     return {
@@ -6973,11 +6706,9 @@ export default defineComponent({
       },
     };
   },
-
   mounted() {
     sendComponentsToVisualEditor(this.customComponents);
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -6986,7 +6717,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -7038,7 +6768,6 @@ export interface ButtonProps {
 
 export default defineComponent({
   name: \\"button\\",
-
   props: [\\"link\\", \\"attributes\\", \\"openLinkInNewTab\\", \\"text\\"],
 });
 </script>"
@@ -7059,7 +6788,6 @@ export interface RenderStylesProps {
 
 export default defineComponent({
   name: \\"render-styles\\",
-
   props: [\\"foo\\"],
 });
 </script>"
@@ -7081,7 +6809,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   props: [\\"name\\"],
 });
 </script>"
@@ -7106,7 +6833,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   props: [\\"name\\"],
 });
 </script>"
@@ -7130,7 +6856,6 @@ interface Props {
 
 export default defineComponent({
   name: \\"nested-show\\",
-
   props: [\\"conditionA\\", \\"items\\"],
 });
 </script>"
@@ -7152,7 +6877,6 @@ interface Props {
 
 export default defineComponent({
   name: \\"show-root-text\\",
-
   props: [\\"conditionA\\"],
 });
 </script>"
@@ -7182,7 +6906,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-basic-component\\",
-
   props: [\\"nested\\"],
 });
 </script>"
@@ -7299,7 +7022,6 @@ export type TypeDependencyProps = {
 
 export default defineComponent({
   name: \\"type-dependency\\",
-
   props: [\\"foo\\"],
 });
 </script>"
@@ -7387,7 +7109,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"use-target-component\\",
-
   computed: {
     name() {
       const prefix = \\"v2\\";
@@ -7411,7 +7132,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { name: \\"Steve\\" };
   },
@@ -7468,7 +7188,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { tortilla: \\"Plain\\", fillings: [] };
   },
@@ -7486,7 +7205,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { value: \\"hello\\" };
   },
@@ -7510,13 +7228,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   props: { disabled: { default: undefined } },
-
   data() {
     return { focus: true };
   },
-
   methods: {
     _classStringToObject(str) {
       const obj = {};
@@ -7544,11 +7259,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { activeTab: 0 };
   },
-
   provide() {
     const _this = this;
     return {
@@ -7574,7 +7287,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { numbers: [\\"one\\", \\"two\\", \\"three\\"] };
   },
@@ -7596,7 +7308,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   methods: {
     log: function log(msg = \\"hello\\") {
       console.log(msg);
@@ -7616,7 +7327,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { html: \\"<b>bold</b>\\" };
   },
@@ -7635,11 +7345,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { show: true };
   },
-
   methods: {
     toggle: function toggle() {
       this.show = !this.show;
@@ -7664,7 +7372,6 @@ import Button from \\"./Button.vue\\";
 export default defineComponent({
   name: \\"my-component\\",
   components: { Button: Button },
-
   data() {
     return { disabled: false };
   },
@@ -7682,14 +7389,12 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   mounted() {
     console.log(\\"onMount\\");
   },
   updated() {
     console.log(\\"onAfterUpdate\\");
   },
-
   unmounted() {
     console.log(\\"onDestroy\\");
   },
@@ -7707,11 +7412,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { name: \\"Steve\\" };
   },
-
   computed: {
     lowercaseName() {
       return this.name.toLowerCase();
@@ -7738,11 +7441,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { a: 2, b: 5, result: null };
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -7751,7 +7452,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -7760,7 +7460,6 @@ export default defineComponent({
       };
     },
   },
-
   methods: {
     calculateResult: function calculateResult(a_, b_) {
       this.result = a_ * b_;
@@ -7826,7 +7525,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { a: 5, b: 12 };
   },
@@ -7847,7 +7545,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { name: \\"Steve\\" };
   },
@@ -7904,7 +7601,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { tortilla: \\"Plain\\", fillings: [] };
   },
@@ -7922,7 +7618,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { value: \\"hello\\" };
   },
@@ -7946,13 +7641,10 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   props: { disabled: { default: undefined } },
-
   data() {
     return { focus: true };
   },
-
   methods: {
     _classStringToObject(str: string) {
       const obj: Record<string, boolean> = {};
@@ -7980,11 +7672,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { activeTab: 0 };
   },
-
   provide() {
     const _this = this;
     return {
@@ -8010,7 +7700,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { numbers: [\\"one\\", \\"two\\", \\"three\\"] };
   },
@@ -8032,7 +7721,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   methods: {
     log: function log(msg = \\"hello\\") {
       console.log(msg);
@@ -8052,7 +7740,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { html: \\"<b>bold</b>\\" };
   },
@@ -8071,11 +7758,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { show: true };
   },
-
   methods: {
     toggle: function toggle() {
       this.show = !this.show;
@@ -8100,7 +7785,6 @@ import Button from \\"./Button.vue\\";
 export default defineComponent({
   name: \\"my-component\\",
   components: { Button: Button },
-
   data() {
     return { disabled: false };
   },
@@ -8118,14 +7802,12 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   mounted() {
     console.log(\\"onMount\\");
   },
   updated() {
     console.log(\\"onAfterUpdate\\");
   },
-
   unmounted() {
     console.log(\\"onDestroy\\");
   },
@@ -8143,11 +7825,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { name: \\"Steve\\" };
   },
-
   computed: {
     lowercaseName() {
       return this.name.toLowerCase();
@@ -8174,11 +7854,9 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { a: 2, b: 5, result: null };
   },
-
   watch: {
     onUpdateHook0: {
       handler() {
@@ -8187,7 +7865,6 @@ export default defineComponent({
       immediate: true,
     },
   },
-
   computed: {
     onUpdateHook0() {
       return {
@@ -8196,7 +7873,6 @@ export default defineComponent({
       };
     },
   },
-
   methods: {
     calculateResult: function calculateResult(a_, b_) {
       this.result = a_ * b_;
@@ -8262,7 +7938,6 @@ import { defineComponent } from \\"vue\\";
 
 export default defineComponent({
   name: \\"my-component\\",
-
   data() {
     return { a: 5, b: 12 };
   },
diff --git a/packages/core/src/generators/vue/optionsApi.ts b/packages/core/src/generators/vue/optionsApi.ts
index dd142f03ba..055094b27e 100644
--- a/packages/core/src/generators/vue/optionsApi.ts
+++ b/packages/core/src/generators/vue/optionsApi.ts
@@ -179,7 +179,7 @@ export function generateOptionsApiScript(
     }
     return `${str},`;
   };
-
+  // prettier-ignore
   return `
         export default ${options.defineComponent ? 'defineComponent(' : ''} {
         ${
@@ -188,54 +188,49 @@ export function generateOptionsApiScript(
             : `name: '${
                 path && options.namePrefix?.(path) ? options.namePrefix?.(path) + '-' : ''
               }${kebabCase(component.name)}',`
-        }
-        ${generateComponents(componentsUsed, options)}
-        ${props.length ? getPropDefinition({ component, props }) : ''}
-        ${
+        }${
+          generateComponents(componentsUsed, options)
+        }${
+          props.length 
+            ? getPropDefinition({ component, props }) : 
+            ''
+        }${
           dataString.length < 4
             ? ''
-            : `
-        data() {
+            : `data() {
           return ${dataString}
         },
         `
-        }
-
-        ${
+        }${
           size(component.context.set)
             ? `provide() {
                 const _this = this;
                 return ${getContextProvideString(component, options)}
               },`
             : ''
-        }
-        ${
+        }${
           size(component.context.get)
             ? `inject: ${getContextInjectString(component, options)},`
             : ''
-        }
-        ${
+        }${
           component.hooks.onInit?.code
             ? `created() {
                 ${component.hooks.onInit.code}
               },`
             : ''
-        }
-        ${
+        }${
           component.hooks.onMount?.code
             ? `mounted() {
                 ${component.hooks.onMount.code}
               },`
             : ''
-        }
-        ${
+        }${
           onUpdateWithoutDeps.length
             ? `updated() {
             ${onUpdateWithoutDeps.map((hook) => hook.code).join('\n')}
           },`
             : ''
-        }
-        ${
+        }${
           onUpdateWithDeps.length
             ? `watch: {
             ${onUpdateWithDeps
@@ -246,30 +241,21 @@ export function generateOptionsApiScript(
               .join(',')}
           },`
             : ''
-        }
-        ${
+        }${
           component.hooks.onUnMount
             ? `unmounted() {
                 ${component.hooks.onUnMount.code}
               },`
             : ''
-        }
-
-        ${
+        }${
           getterString.length < 4
             ? ''
-            : `
-          computed: ${getterString},
-        `
-        }
-        ${
+            : `computed: ${getterString},`
+        }${
           functionsString.length < 4
             ? ''
-            : `
-          methods: ${functionsString},
-        `
-        }
-        ${Object.entries(component.meta.vueConfig || {})
+            : `methods: ${functionsString},`
+        }${Object.entries(component.meta.vueConfig || {})
           .map(([k, v]) => `${k}: ${v}`)
           .join(',')}
         }