typescriptで書かれているものをjavascriptで書きたい(vue.js)

Question

初心者です。

こちらを参考にLaravel + Vue.jsでフォロー機能を実装しています。
https://crieit.net/posts/Laravel-Vue-js

vueの部分でtypescriptで書かれているのですが、自分はvue.jsの形で書きたいです。

ここ参考にしながらだったらtypescriptからvueに自分で出来るんじゃない？

というようなのサイトなどあればぜひ教えていただきたいです。

下記、typescriptからjavascript(vue.js)に書き直したい部分になります。

import { Vue, Component, Prop } from 'vue-property-decorator'
import axios from 'axios'

@Component
export default class UserFollow extends Vue {
  @Prop({
    type: String,
    required: true
  })
  id!: string

  @Prop({
    type: Boolean,
    default: false
  })
  following!: boolean

  currentFollowing = this.following
  sending = false

async follow() {
    if (this.sending) {
      return
    }
    this.sending = true
    const data = { id: this.id }
    await axios.post('/follow-users', data)
    this.currentFollowing = true
    this.sending = false
  }

  async unfollow() {
    if (this.sending) {
      return
    }
    this.sending = true
    await axios.delete(`/follow-users/${this.id}`)
    this.currentFollowing = false
    this.sending = false
  }

よろしくお願いします。

追記
手探りで書きながらです。（下にエラーあります)

<script>
export default {
  data() {
    return{
      currentFollowing: this.following,
      sending: false
    }
  },
  props: {
    id: {
      type: String,
      required: true
    },
    following: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    async follow() {
      if(this.sending){
        return
      }
      this.sending = true
      const data = { id: this.id }
      await axios.post('/follow-users', data)
      this.currentFollowing = true
      this.sending = false
    },
    async unfollow() {
      if(this.sending){
        return
      }
      this.sending = true
      await axios.delete(`/follow-users/${this.id}`)
      this.currentFollowing = false
      this.sending = false
    }
  }
}
</script>

const router = new VueRouter({
    routes: [
        {
            path: '/follow/:id',
            name: 'user.follow',
            component: FollowComponent,
            props: true
        }
     ]
})

<router-link v-bind:to="{name: 'user.follow'}">
            <button class="btn btn-primary" type="submit">Follow</button>
          </router-link>

エラー
[Vue warn]: Missing required prop: "id"

Comments

[hoshi-takanori]

JavaScript はどうやって動かしてますか？ babel とか webpack とか使ってますか？

[miyabi_pudding]

TypeScriptを使っているということは、CLIを使っているのですか？
それとも、Laravelから、JavaScriptとして出力してるのでしょうか？
hoshi-takanoriさんと、聞きたいことはほぼ同じです。
ようは、どうやって最終的なJavaScriptに落とし込んでいるのか？を聞きたいです。

なんにせよ、JavaScriptにできて、TypeScriptでやれない（コンパイル後の話）ってことはあまりないので、そのままTypeScript使われた方がいいかと思いますが・・・？

[tenlife]

webpack(npmでコンパイル)で動かしています。laravelからjavascriptを動かしています。

->そのままTypeScript使われた方がいいかと思いますが・・・？
今まで他の実装は全てvue.jsで書いてきました。なのでこの部分の実装だけtypescriptになるのは問題ないのでしょうか？vue.jsに揃えたいという気持ちもあります。

[miyabi_pudding]

意味がわかりません。
TypeScript使おうが、Vue.jsを使っている以上、Vue.jsです。
.jsだからTypeScript使うのはおかしい？ってことでしょうか？
最終形が、jsである以上、Vue.jsであると言えますし、
Vue.jsでの開発において、TypeScriptを使うことはよくあります。
特に今回のような、コンパイルするような形と、CLIを使うパターンです。

この部分の実装だけ、というのは、この案件の中ででしょうか？
それとも、案件的に他の案件と比較して、この案件だけTypeScript開発、って意味でしょうか？