親から受け取った変数を、別名の変数に入れたい

#やりたいこと
input type="range" を使って、音楽プレイヤーのシークバーを作っています。
曲の進行とともにつまみが移動し、つまみを移動しても曲を進めたり戻したりできるよう実装しています。
曲の進行とともにつまみが移動し、つまみを移動しても曲を進めたり戻したりはできるのですが、
下記のようなエラーが出て、propsで受け取った値を変更するなとエラーが出るので、解消したいです。

#できないこと
エラーをググり、いくつかのサイトをみて、
propsで受け取った値を子コンポーネントで別の変数に入れるという対処法が多くみられたので実践してみましたが、受け取った変数を別名の変数に入れようとすると値がはいりません

#エラー中のコード

Player.vue
1<input v-model="currentSecTime" min="0" :max="duration" type="range" @input="changePrg" />
2
3<script>
4export default{
5 props:{
6  currentSecTime
7 }
8</script>

#エラー

 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated

#エラー後に修正したコード

Player.vue
1<input v-model="currentSecondTime" min="0" :max="duration" type="range" @input="changePrg" />
2
3<script>
4export default{
5 props:{
6  currentSecTime
7 },
8 data(){
9  currentSecondTime: this.currentSecTime
10 }
11</script>

こちらのコードを書いても、エラーも消えず、曲の進行とともに進んでいたシークバーのつまみも動かなくなり、つまみを動かしても曲は進みも戻りもしませんでした。
devtoolで確認しましたが、currentSecTimeの受け取りまではできているようで、現在の曲の位置の数字は出ています。

#環境

npm 6.13.4
node 12.16.1
Nuxt.js
chorome
Mac

行動規範の内容に同意します

回答1件

ベストアンサー

$emit()で親データにデータを渡すやりかたに変えるのはいかがでしょう？

参考サイト

簡単に受け渡しのテストをしてみました

parent.vue
1<template>
2  <div>
3    <div>
4      <h1>Parent</h1>
5    </div>
6    <input
7      v-model="data"
8      @input="callChild"
9    >
10    <div>
11      parent data:{{data}}
12    </div>
13    <div>
14      <child
15        ref="child"
16        :parentdata="data"
17        @editParent="editParent"
18      />
19    </div>
20  </div>
21</template>
22<script>
23import Child from '@/components/Child.vue'
24
25export default {
26  components: {
27    Child
28  },
29  data() {
30    return {
31      data: ''
32    }
33  },
34  methods: {
35    callChild() {
36      console.log('parent callchild')
37      this.$refs.child.callChild(this.data)
38    },
39    editParent(data) {
40      console.log('parent data', data)
41      this.data = data
42    }
43  }
44}
45</script>

child.vue
1<template>
2  <div>
3    <h1>CHILD</h1>
4    <div>
5      <input
6        v-model="data"
7        @input="edit"
8      >
9    </div>
10    <div>
11      child data{{data}}
12    </div>
13  </div>
14</template>
15<script>
16export default {
17  data() {
18    return {
19      data: ''
20    }
21  },
22  methods: {
23    callChild(data) {
24      console.log('child callchild')
25      this.data = data
26    },
27    edit() {
28      console.log('child edit')
29      this.$emit('editParent', this.data)
30    }
31  }
32}
33</script>