[Rails * Vue.js] 入力フォームで入力が失敗したときに、直前の入力内容をVue.jsに引き渡す方法がわかりません

##　おこっている問題
Railsアプリケーションに部分的にVue.jsを導入しています。

プルダウンリスト（Vue.jsで作成）で選択肢を選択した状態で、入力フォームの他の内容（Railsで作成）にエラーがあったとき、直前の入力内容が引き継がれず、初期状態に戻ってしまいます。

▼選択済みの状態

▼フォームの他の項目にエラーがあったとき

なんとか、直前の入力内容を引継ぎたいと思っています。paramsのデータをVue.jsに渡せれば良いのだと思いつつ、その方法がわかりません。

なお、実行環境は以下の通りです。

Rails 5.2.4.2
Vue 2.6.11

現在の実装

現在このページは、イベント作成ページ（仮に、events#newとします）の中に、Vue.jsのコンポーネントを入れ込む形で実装しています。

view
1= form_with model: @event, local: true do |f|
2 # 日付のフォーム
3 = f.label :date, "実施日"
4 = f.date_field :date
5
6 # selectボックス(Vueコンポーネント)
7 %activity-type-select-form.vue-component

Vueのコンポーネント内では、Rails側(events#new)とは別のコントローラーを使用して、データを取り込んでいます。

Vue
1<template>
2  <div>
3    <label for="event_type">区分</label>  
4    <select>
5      <option value="">選択してください</option>
6      <option v-for="cat in categories"
7              :value="cat.name"
8              :key="cat.name">
9              {{ cat.text }}
10      </option>
11    </select>
12  </div>
13</template>
14
15<script>
16import axios from 'axios';
17
18export default {
19  data: function() {
20    return {
21      categories: []
22    }
23  },
24  mounted() {
25    axios.get('/api/event/new.json').then(response => (this.categories = response.data))
26  }
27}
28</script>

コントローラーはこのようになっています。

▼Vue.js用(/controllers/api/events_controller.rb)

controller
1class Api::EventsController < ApplicationController
2  def new
3    @event_types = Event.event_types
4    render 'new', formats: 'json', handlers: 'jbuilder'
5  end
6end

▼Rails用(/controllers/events_controller.rb)

controller
1def new
2  @event = Event.new
3end
4
5def create
6  @event = Event.new(event_params)
7  if @event.save
8    redirect_to root_url
9  else
10    render :new
11  end
12end