title: Passing props to Vue root instance via attributes on element the app is mounted on
body: <p>I am terribly new to Vue, so forgive me if my terminology is off.  I have a .NET Core MVC project with small, separate vue pages.  On my current page, I return a view from the controller that just has:</p>
  <pre><code>@model long;
  
  &lt;div id=&quot;faq-category&quot; v-bind:faqCategoryId=&quot;@Model&quot;&gt;&lt;/div&gt;
  
  @section Scripts {
      &lt;script src=&quot;~/scripts/js/faqCategory.js&quot;&gt;&lt;/script&gt;
  }
  </code></pre>
  <p>Where I send in the id of the item this page will go grab and create the edit form for.  <code>faqCategory.js</code> is the compiled vue app.  I need to pass in the <code>long</code> parameter to the vue app on initialization, so it can go fetch the full object.  I mount it with a <code>main.ts</code> like:</p>
  <pre><code>import { createApp } from 'vue'
  import FaqCategoryPage from './FaqCategoryPage.vue'
  
  createApp(FaqCategoryPage)
      .mount('#faq-category');
  </code></pre>
  <p>How can I get my <code>faqCategoryId</code> into my vue app to kick off the initialization and load the object?  My <code>v-bind</code> attempt seems to not work - I have a <code>@Prop(Number) readonly faqCategoryId: number = 0;</code> on the vue component, but it is always <code>0</code>.</p>
  <p>My FaqCategoryPAge.vue script is simply:</p>
  <pre><code>&lt;script lang=&quot;ts&quot;&gt;
  
      import { Options, Vue } from &quot;vue-class-component&quot;;
      import { Prop } from 'vue-property-decorator'
      import Card from &quot;@/Card.vue&quot;;
      import axios from &quot;axios&quot;;
      import FaqCategory from &quot;../shared/FaqCategory&quot;;
  
      @Options({
          components: {
              Card,
          },
      })
      export default class FaqCategoryPage extends Vue {
          @Prop(Number) readonly faqCategoryId: number = 0;
  
          mounted() {
              console.log(this.faqCategoryId);
          }
      }
  
  &lt;/script&gt;
  </code></pre>