Vue.js for accets_nested_attributes_for

job_role.html.slim

  #vue-job-requirements-app data-job-requirements=job_requirements_json(@job_role.job_requirements)
    .form-group v-for="req in requirements"
      input type="hidden" name="job_role[job_requirements_attributes][{{ $index }}][id]" value="{{ req.id }}"
      input type="hidden" name="job_role[job_requirements_attributes][{{ $index }}][_destroy]" value="{{ req._destroy }}"
      .input-group v-if="req._destroy != '1'" transition="fade-out"
        input.form-control type="text" name="job_role[job_requirements_attributes][{{ $index }}][description]" value="{{ req.description }}"
        .input-group-addon v-on:click="removeRequirement($index)"
          i.fa.fa-times.text-danger
    button.btn.btn-success.btn-xs type="button" v-on:click="addRequirement()"
      i.fa.fa-plus

job_role.js

if($('#vue-job-requirements-app').length > 0) {
  new Vue({
    el: '#vue-job-requirements-app',
    data: {
      newRequirement: { id: null, description: '', _destroy: null },
      requirements: $('#vue-job-requirements-app').data('job-requirements')
    },
    methods: {
      addRequirement: function () {
        this.requirements.push(this.newRequirement)
      },
      removeRequirement: function (index) {
        this.requirements.$set(index, $.extend({}, this.requirements[index], {_destroy: 1}))
      }
    }
  })
};