title: Pass JavaScript variable into vue component on the root element
body: <p>I am trying to pass a dynamic javascript variable(an <strong>ionRangeSlider()</strong> value) into an external Vue component in my <code>#app</code> element. but the variable is outside the <code>#app</code> element and I keep getting this error: </p>
  
  <blockquote>
    <p>[Vue warn]: Property or method "range" 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.</p>
  </blockquote>
  
  <p>I tried to define it on the instance by giving it a default value as follows:</p>
  
  <pre><code>const app = new Vue({
      el: '#app',
      data: {'range': [0,2000]}, // Default value
  });
  </code></pre>
  
  <p>And it gets the value in the component but it doesn't get the new changed value since it is not getting it from the main file where the <strong>.ionRangeSlider()</strong> is instantiated and listening from. </p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;div class="page-content"&gt;
              &lt;filterables 
                      :range="range"&gt;
              &lt;/filterables&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;script&gt;
          var range = [];
          $("#b_range").ionRangeSlider({
  
            type:"double",grid:!0,min:0,max:4e3,from:0,to:2e3,prefix:"$",
            onFinish: function (data) {
  
              let minRange = data.from;
              let maxRange = data.to;
  
              range = [minRange ,maxRange ];
              console.log(range);
  
            }
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am kinda new to Vue, I wanted to know how I can pass the <strong>range</strong> value to the <strong>filterable</strong> component. any help is appreciated!</p>