Use of width in percentage

[whimsicaldreamer]

@nikitasnv I am trying to use this component for a dashboard, but my present needs require me to use width in percentages. Is it possible to do this? The following is how I tried creating a component but the issue arises when I try setting a certain width in percentage by selecting the value from the dropdown.

<template>
  <vue-resizable 
    :min-width="320"
    :width="containerWidth + '%'" 
    :active="['r']"
    
  >
    <div class="resizable-content">
      <pre>{{ containerWidth }}</pre>

      <select v-model="containerWidth">
        <option :value="75">75%</option>
        <option :value="50">50%</option>
      </select>

      <slot></slot>
    </div>
  </vue-resizable>
</template>

<script>
import VueResizable from 'vue-resizable'

export default ({
  name: 'resizeableContainer',
  components: {VueResizable},
  props: ['width'],
  data () {
    return {
      containerWidth: this.width
    }
  }
})
</script>

<style scoped>
  .resizable-content {
    width: 100%;
    height: 100%;
    background-color: aqua;
  }
</style>