Fieldtype.js

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `<div>
<h4>Padding</h4>
<div class="uk-grid uk-margin-bottom" v-if="isReady">
  <div class="uk-width-1-2">
    Top
    <select v-model="model.normal.top" class="uk-width-1-1">
      <option v-for="item in options" :value="item" :key="item.id">{{ item.name }}</option>
    </select>
  </div>
  <div class="uk-width-1-2">
    Left
    <select v-model="model.normal.left" class="uk-width-1-1">
      <option v-for="item in options" :value="item" :key="item.id">{{ item.name }}</option>
    </select>
  </div>
  <div class="uk-width-1-2">
    Right
    <select v-model="model.normal.right" class="uk-width-1-1">
      <option v-for="item in options" :value="item" :key="item.id">{{ item.name }}</option>
    </select>
  </div>
  <div class="uk-width-1-2">
    Bottom
    <select v-model="model.normal.bottom" class="uk-width-1-1">
      <option v-for="item in options" :value="item" :key="item.id">{{ item.name }}</option>
    </select>
  </div>
</div>
<h4>Padding Mobile</h4>
<div class="uk-grid" v-if="isReady">
  <div class="uk-width-1-2">
    Top
    <select v-model="model.mobile.top" class="uk-width-1-1">
      <option v-for="item in options" :value="item" :key="item.id">{{ item.name }}</option>
    </select>
  </div>
  <div class="uk-width-1-2">
    Left
    <select v-model="model.mobile.left" class="uk-width-1-1">
      <option v-for="item in options" :value="item" :key="item.id">{{ item.name }}</option>
    </select>
  </div>
  <div class="uk-width-1-2">
    Right
    <select v-model="model.mobile.right" class="uk-width-1-1">
      <option v-for="item in options" :value="item" :key="item.id">{{ item.name }}</option>
    </select>
  </div>
  <div class="uk-width-1-2">
    Bottom
    <select v-model="model.mobile.bottom" class="uk-width-1-1">
      <option v-for="item in options" :value="item" :key="item.id">{{ item.name }}</option>
    </select>
  </div>
</div>
</div>`,
  data() {
    return {
      isReady: false,
      options: []
    }
  },
  methods: {
    initWith() {
      return {
        plugin: 'example_plugin',
        normal: {top: "0", left: "0", right: "0", bottom: "0"},
        mobile: {top: "0", left: "0", right: "0", bottom: "0"}
      }
    },
    pluginCreated() {
      this.api
        .get('cdn/datasource_entries?datasource=gap')
        .then((res) => {
          this.isReady = true
          this.options = res.data.datasource_entries
        })
      console.log('plugin:created')
    }
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}