application.js

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb
import Vue from 'vue/dist/vue.esm';
import Owners from './Owners.vue';

document.addEventListener('DOMContentLoaded', () => {
  const element = document.getElementById('principal-owners');

  if (element !== null) {
    const principalOwners = new Vue({
      el: element,
      components: {
        'mbc-owners': Owners
      }
    });
  }

})

Owners.vue

<template>
  <div>
    <h4>Principal Owner Information</h4>
    <div v-show="owners.length > 0">
      <input v-model="owners_attributes" id="owners_attributes" name="owners_attributes" type="hidden">
      <table class="table table-striped">
        <thead>
          <th>Name</th>
          <th>Ownership Percentage</th>
        </thead>
        <tbody>
          <tr v-for="(owner, index) in owners" :key="owner.id">
            <td>{{ owner.name }}</td>
            <td>{{ owner.ownership_percentage }}</td>
            <td><button type="button" class="btn btn-danger btn-sm" @click="deleteOwner(index)"><span class="glyphicon glyphicon-trash"></span></button></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#ownerModal">Add Owner</button>
      <div class="modal fade" id="ownerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Add Owner</h4>
            </div>
            <div class="modal-body">
              <div class="form-inputs">
                <div class="form-group">
                  <label class="control-label">Owner Name</label>
                  <input v-model="name" type="text" name="name" id="owner_name" class="form-control">
                </div>
                <div class="form-group">
                  <label class="control-label">Owner Address</label>
                  <input v-model="address" type="text" name="address" id="owner_address" class="form-control">
                </div>
                <div class="form-group">
                  <label class="control-label">Owner SSN</label>
                  <input v-model="ssn" type="text" name="ssn" id="owner_ssn" class="form-control">
                </div>
                <div class="form-group">
                  <label class="control-label">Ownership Percentage</label>
                  <input v-model="ownership_percentage" type="text" name="ownership_percentage" id="owner_ownership_percentage" class="form-control">
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button @click="addOwner" type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        owners: [],
        owners_attributes: '',
        name: '',
        address: '',
        ssn: '',
        ownership_percentage: ''
      }
    },
    methods: {
      clearInputs() {
        this.name = '';
        this.address = '';
        this.ssn = '';
        this.ownership_percentage = '';
      },
      addOwner() {
        this.owners.push({
          name: this.name,
          address: this.address,
          ssn: this.ssn,
          ownership_percentage: this.ownership_percentage
         })
        this.clearInputs();
      },
      deleteOwner(index) {
        this.owners.splice(index, 1);
      }
    },
    updated() {
      this.owners_attributes = JSON.stringify(this.owners);
    }
  }
</script>