为什么我的Kendo DataSource不使用Vue更新其URL？

Question

我正在尝试根据使用Vue和Kendo UI的Web应用程序中的某些用户输入来更新数据源的url。

我的html是以下内容：

<div id="app">
<kendo-button @click="refresh">Hello World</kendo-button><br>
<input v-model="page" /><br>
{{fullUrl}}<br>
<kendo-datasource ref="ds" :transport-read-data-type="'json'" :transport-read-url="fullUrl"></kendo-datasource>
<kendo-grid :data-source-ref="'ds'"></kendo-grid>
</div>

使用javascript代码：

new Vue({
  el: "#app",
  data: function(){
    return {
      hello:"world",
      base_url:"https://jsonplaceholder.typicode.com/",
      page:"posts"
    }
  },
  computed: {
    fullUrl: function() {
        return this.base_url + this.page
    }
  },
  methods: {
    refresh: function() {
        var the_ds = this.$refs.ds.kendoWidget()
      //the_ds.options.transport.read.url = this.fullUrl
        this.$refs.ds.kendoWidget().read()
    }
  }
})

在我看来，当用户用另一个页面（例如“注释”）更新输入时，数据源应在内部更新该字段的值。但是，这行不通，而且看来我必须使用我在the_ds.options.transport.read.url = this.fullUrl处注释的行来手动更新值。

我做错什么了吗？

有个有效的小提琴here。