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

我正在尝试将动态javascript变量（一个IonRangeSloider（）值）传递到我的

#app

元素中的外部Vue组件中。但是变量不在

#app

元素的范围内，我一直得到这个错误：

[Vue warn]：属性或方法“范围”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的

我尝试在实例上对其进行定义，为其提供一个默认值，如下所示：

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

它会获取组件中的值，但不会获取新更改的值，因为它不会从实例化并侦听.ionRangeSloider（）的主文件中获取该值

<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>

var范围=[]；
$（“#b#范围”）.IonRange滑块({
键入：“双精度”，网格：！0，最小值：0，最大值：4e3，从：0到：2e3，前缀：“$”，
onFinish：函数（数据）{
设minRange=data.from；
设maxRange=data.to；
范围=[minRange，maxRange]；
控制台日志（范围）；
}
});

我是Vue的新手，我想知道如何将范围值传递给可过滤组件。感谢您的帮助