Почему мой источник данных Kendo не обновляет свой URL с помощью Vue?

Question

Я пытаюсь обновить URL-адрес источника данных в зависимости от вводимых пользователем данных в веб-приложении, использующем пользовательский интерфейс Vue и Kendo.

Мой 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 который вручную обновляет значение.

Я делаю что-то неправильно?

Здесь есть рабочая скрипка.