Почему Vue не видит данные, описанные в data, через v-model?

Question

[samorez999]

Пытаюсь подружить laravel с vue. Хочу прикрутить слайдер. Вставляю теги компонента прямо в php-шаблон blade, регистрирую, миксую, все как положено. Все работает в дефолтном состоянии, но когда дело доходит до обмена данными с vueшным тегом script в файле шаблона, то консоль ругается на то, что таких данных-то и нет.

@extends('layouts.app')

@section('content')
    <vue-slider v-model="range-slider"></vue-slider>
@endsection

<script>
  export default {
    components: VueSlider,
    data() {
      return {
        range-slider: [...]
      }
    }
  }
</script>

Консоль выдает ошибку такого вида:

app.js:10446 Uncaught TypeError: Cannot read properties of undefined (reading 'range-slider')
    at Proxy.render (eval at compileToFunction (app.js:45293:21), <anonymous>:172:49)
    at renderComponentRoot (app.js:11120:44)
    at ReactiveEffect.componentUpdateFn [as fn] (app.js:15264:57)
    at ReactiveEffect.run (app.js:9048:25)
    at setupRenderEffect (app.js:15390:9)
    at mountComponent (app.js:15173:9)
    at processComponent (app.js:15131:17)
    at patch (app.js:14732:21)
    at render (app.js:15891:13)
    at mount (app.js:14123:25)

Почему же так? Как мне их подружить?

Answer 1

[canClick]

Ставлю ставки на то, что вы не знаете о том, что переменные нельзя объявлять через тире.

Answer 2

[wind-of]

return {
  rangeSlider: [...]
}

или

return {
  "range-slider": [...]
}

https://developer.mozilla.org/ru/docs/Web/JavaScri...