<div id="app">
  <c-notch :child-notch-size = notchSize></c-notch>
  
  <div class="form">
    <input type="range" min="0" max="50"  v-model="notchSize" @input="change">
  </div>
</div>

<template id="notch">
  <div class="notch" :style="{'--notchSize': changeChildNotchSize}">
    <slot>This is notch module box!</slot>
  </div>
</template>

@import url('https://fonts.googleapis.com/css?family=Lato|Roboto:700');

body {
  background-color: #777;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAU0lEQVQIHQXBwRGDIBAAwO2/AMcCDHAcPjIRxjJ8Je1kl1uqUgphsWu6w0sIG6npLpcUBql4e/wsVRKabrkNTacIYbMrwsF06rqUhsnXVKVT+Hj+Ue4rPSONk4kAAAAASUVORK5CYII=);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: 'Lato', sans-serif;
  line-height: 1.4;
  color: #ffdebd;
  margin: 1rem;
}

.notch {
  max-width: 400px;
  padding: 3rem;
  background: #f06d06;
  
  --notchSize: 20px;
  
  clip-path: 
    polygon(
      0% var(--notchSize), 
      var(--notchSize) 0%, 
      calc(100% - var(--notchSize)) 0%, 
      100% var(--notchSize), 
      100% calc(100% - var(--notchSize)), 
      calc(100% - var(--notchSize)) 100%, 
      var(--notchSize) 100%, 
      0% calc(100% - var(--notchSize))
    );
}

h2 {
  color: white;
  margin: 0 0 1rem 0;
  font-family: 'Roboto', sans-serif;
}
p {
  margin: 0;
}

input {
  position: absolute;
  top: 20px;
  left: 5vw;
  width: 90vw;
}

Vue.component('c-notch',{
  template: '#notch',
  props: ['childNotchSize'],
  computed: {
    changeChildNotchSize: function () {
      return this.childNotchSize + 'px'
    }
  }
  
})

let app = new Vue({
  el: '#app',
  data () {
    return {
      notchSize: '20'
    }
  },
  methods: {
    change: function (e) {
      this.notchSize = e.target.value
      console.log(this.notchSize)
    }
  }
})