将JavaScript变量传递到根元素上的vue组件中

Question

我试图将动态javascript变量（ ionRangeSlider（）值）传递到#app元素中的外部Vue组件中。但是变量在#app元素之外，并且我不断收到此错误：

  

[Vue警告]：属性或方法“范围”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

我尝试通过为实例提供默认值来定义它，如下所示：

const app = new Vue({
    el: '#app',
    data: {'range': [0,2000]}, // Default value
});

它获取组件中的值，但由于没有从实例化 .ionRangeSlider（）并从其侦听的主文件中获取，因此未获取新的更改值。

<div id="app">
    <div class="page-content">
            <filterables 
                    :range="range">
            </filterables>
    </div>  
</div>

<script>
        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);

          }
        });
</script>

我对Vue有点陌生，我想知道如何将 range 值传递给 filterable 组件。任何帮助表示赞赏！