保存项目在可排序组件中的位置

Question

我正在Vue.js中使用UIKit（GetUIKit）。我有3个拖曳的物件清单（编号，图片）。我想将图片的位置保存在每个列表中，但是数组似乎并没有改变，我也不知道如何找到将其放入哪个数组。

<template>
  <div class="uk-child-width-1-4@s" uk-grid>
    <div>
      <h4>Selected products</h4>
      <div
        uk-sortable="group: sortable-group"
        v-for="product in selectedProducts"
        v-bind:key="product.id"
        v-on:stop="greet(product.id, selectedProducts, outfit1, outfit2)"
      >
        <div class="uk-card uk-card-small uk-card-default uk-card-body">
          <img v-bind:src="product.image">
        </div>
      </div>
    </div>

    <div>
      <h4>Outfit 1</h4>
      <div
        uk-sortable="group: sortable-group"
        v-for="product in outfit1"
        v-bind:key="product.id"
        v-on:stop="greet(product.id, selectedProducts, outfit1, outfit2)
      >
        <div class="uk-card uk-card-small uk-card-default uk-card-body">
          <img v-bind:src="product.image">
        </div>
      </div>
    </div>

    <div>
      <h4>Outfit 2</h4>
      <div
        uk-sortable="group: sortable-group"
        v-for="product in outfit2"
        v-bind:key="product.id"
        v-on:stop="greet(product.id, selectedProducts, outfit1, outfit2)"
      >
        <div class="uk-card uk-card-small uk-card-default uk-card-body">
          <img v-bind:src="product.image">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProducts: [
        {
          id: 1,
          name: "Cool top",
          image:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfpwfhIA_q8BvD5Hj6TKHfTd0fhfaNQcYKPlBcww6aZXWUOE3R"
        },
        {
          id: 2,
          name: "Fun jeans",
          image:
            "https://wwws.dior.com/couture/ecommerce/media/catalog/product/cache/1/grid_image_8/460x497/17f82f742ffe127f42dca9de82fb58b1/U/d/1550571393_922P02A3932_X5846_E08_GH.jpg"
        }
      ],
      outfit1: [
        {
          id: 3,
          name: "shoes",
          image: "https://images.vans.com/is/image/Vans/D3HY28-HERO?$583x583$"
        }
      ],
      outfit2: [
        {
          id: 4,
          name: "scarf",
          image:
            "https://www.brontebymoon.co.uk/wp-content/uploads/2017/04/TAR80-A01-Lambswool-Tartan-Scarf-Antique-Dress-Stewart.jpg"
        }
      ]
    };
  },
  methods: {
    greet: function(position, ) {
      // This is where I want to save the position, for ex: {outfit1: [id: 1,2], outfit2: [id: 3], selectedProduct: [id: 4]}
      console.log(position);
    }
  }
};
</script>

我想保存职位，例如{outfit1: [id: 1,2], outfit2: [id: 3], selectedProduct: [id: 4]}，但我被困住了。有任何想法吗？

谢谢！