render後のvueで生成しているフォームへRailsのインスタンス変数を渡したい

Question

現状

createアクションなどのvalidation失敗後にrenderでフォームへ戻ってきたときに、vueで作成したdatetimepickerの値が空になっている。

実現したいこと

Rails5にて下記のVueフォームを用いてdatetimepickerのフォームにvalidation失敗後のrender時にも値が格納されていてほしい。
現状、Railsのインスタンスをvueへ渡す方法がわからない状況です。

わかる方がいらっしゃいましたら、ご教授お願い致します。

//controller

  def create
    @job = Job.new(job_params)
    respond_to do |format|
      if @job.save
        format.html { redirect_to jobs_path, notice: "#{@job.name}とスケジュールが作成されました。"}
        format.json { render :show, status: :created, location: @job }
      else
        @job = Job.new(job_params) //ここでnewに値を渡しています。
        format.html { render :new }
        format.json { render json: @job.errors, status: :unprocessable_entity }
      end
    end
  end

//recruiting_period.vue
<template>
  <div id="recruiting_period">
    <el-date-picker v-model="recruiting_period" :value="321" format="yyyy-MM-dd H:mm" type="datetime" name="job[recruiting_period]" placeholder="日時を選択してください"></el-date-picker>
  </div>


</template>
new Date
<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'


Vue.use(ElementUI, {locale})

  export default {
    name: 'recruiting_period',
    data () {
      return {
      	recruiting_period: ""
      }
    }
  }

</script>

//erb
      <div class="form-group">
        <div data-vue="recruiting_period">
        </div>
      </div>

Answer 1

Vueのpropsに渡せば良さそうですが…
そもそもエラー時にリダイレクトで戻すのがRails的な発想ですね。
Vueを使うならフォームのポストもVueで行う。Rails側はAPIでjsonを返す。
成功／失敗に応じて後の処理は好きなように。
バリデーション失敗時でも入力値はそのままなのでエラーを表示するなりする。
ElementUIまで使ってるならVue側でやったほうが良くなる。