数据动态添加和取消，以及排序

需求描述：
1.左右两个框里的字段选中后点击箭头可以添加到对侧框里，被选中的框里相应的字段删除；
2.已经选好的list点击上下button 能够进行选中的字段上下排序；

项目依赖使用了 bootstrap-vue https://bootstrap-vue.js.org；
安装
npm install vue bootstrap-vue bootstrap
或
npm install vue bootstrap-vue

引用
import Vue from ‘vue’
import BootstrapVue from ‘bootstrap-vue’

Vue.use(BootstrapVue)
ok,直接上vue 组件

<template>
    <div style="width: 90%;margin:10px auto ;">
        <b-button pill variant="primary" size="sm" @click="fieldCustom">
           点击
        </b-button>
        <b-modal id="custom-modal" ref="customodal" scrollable size="lg" title="Custom Table Fields">
            <b-container fluid>
                <b-row style="padding: 1rem 1rem 0rem 1rem;" class="justify-content-sm-center">
                    <b-col sm="5">
                        <h6>All fields</h6>
                    </b-col>
                    <b-col sm="1"></b-col>
                    <b-col sm="5">
                        <h6>Selected fields to display</h6>