_form.html.erb

<%= content_tag :div,
id: "product-form",
data: {
  id: product.id,
  product: product.to_json(except: [:id, :created_at, :updated_at]),
  variations_attributes: product.variations.to_json(except: [:product_id, :created_at, :updated_at]),
} do %>

<label>Product Name</label>
<input type="text" v-model="product.name" />

<h4>Variations</h4>
<div v-for="(variation, index) in product.variations_attributes">
  <div v-if="variation._destroy == '1'">
    {{ variation.name }} will be removed. <button v-on:click="undoRemove(index)">Undo</button>
  </div>
  <div v-else>
    <label>Variation Name</label>
    <input type="text" v-model="variation.name" />
    <button v-on:click="removeVariation(index)">Remove</button>
  </div>

  <hr />
</div>

<button v-on:click="addVariation">Add Variation</button>

<br />
<button v-on:click="saveProduct">Save Product</button>
<% end %>