title: Vue.js 2 Multiple Properties defined in one Single-File component
body: <p>I am working on a Laravel 5.5 &amp; Vue.js 2.x project, after several digging searchs and questions I came to components. But still I have a warning message when the page renders:</p>
  <blockquote>
  <p><strong>[Vue warn]:</strong> Property or method &quot;trimestral&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: <a href="https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties</a>.</p>
  <p>(found in &lt; Root &gt;)</p>
  </blockquote>
  <p>I have the following Single-File component in a <em>Vue</em> file: FormExpenses.vue:</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;input-group&quot;&gt;
          &lt;input class=&quot;form-control&quot; type=&quot;number&quot; min=&quot;0&quot; name=&quot;expenses&quot; id=&quot;expenses&quot; v-model=&quot;expenses&quot;&gt;
          &lt;div class=&quot;input-group-btn&quot;&gt;
              &lt;select class=&quot;form-control&quot; name=&quot;expenses_range&quot; id=&quot;expenses_range&quot; v-model=&quot;expensesRange&quot; :disabled=&quot;expenses &lt; 1&quot;&gt;
                  &lt;option value=&quot;&quot; disabled=&quot;&quot;&gt;Elija el rango de expensas&lt;/option&gt;
                  &lt;option value=&quot;mensual&quot;&gt;Mensual&lt;/option&gt;
                  &lt;option value=&quot;trimestral&quot;&gt;Trimestral&lt;/option&gt;
                  &lt;option value=&quot;cuatrimestral&quot;&gt;Cuatrimestral&lt;/option&gt;
                  &lt;option value=&quot;semestral&quot;&gt;Semestral&lt;/option&gt;
                  &lt;option value=&quot;anual&quot;&gt;Anual&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      module.exports = {
          props: {
              amount: {
                  type: Number,
                  default: 0
              },
              range: {
                  type: String,
                  default: '',
              }
          },
          data: function() {
              return {
                  expenses: this.amount,
                  expensesRange: this.range,
              }
          },
      }
  &lt;/script&gt;
  </code></pre>
  <p>I have registered the component &quot;correctly&quot; since some data seems to work. This is in the Vue instance file. Besides, I have defined the following element which seems it renders well in the form:</p>
  <pre><code>&lt;expenses-form 
          :amount=&quot;@if(old('expenses')) {{ old('expenses') }}@elseif(isset($property) &amp;&amp; $property-&gt;expenses) {{ $property-&gt;expenses }}@endif&quot;
          :range=&quot;@if(old('expenses_range')) {{ old('expenses_range') }}@elseif(isset($property) &amp;&amp; $property-&gt;expenses_range) {{ $property-&gt;expenses_range }}@endif&quot;
          &gt;&lt;/expenses-form&gt;
  </code></pre>
  <p>This seems to be working because it shows the following while rendering:
  <a href="https://i.stack.imgur.com/QIgzo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QIgzo.png" alt="Form" /></a></p>
  <p>As seen, the first field is being rendered with their functions and data, but not the second one, despite according to <a href="https://v2.vuejs.org/v2/guide/forms.html#Select" rel="nofollow noreferrer">Vue.js documentatiob</a> seems to be ok.</p>
  <p>Any comment is appreciated.</p>