<div id="app" :style="background">
  <div class="center column">
  <color-input v-for="(color,index) in colors" :colorp="color" :key="index" v-on:new-color="updateColors"></color-input>
    <button @click="randomColors">random</button>
  </div>
</div>

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

body{
  height:100vh;
  width:100vw;
}

#app{
  height:100%;
  display:flex;
}

.center {
  display:flex;
  justify-content:center;
  align-items:center;
  width:400px;
  margin:auto;
  padding: 25px 0px;
}

.column{
  flex-direction: column
}

input{
  display: block;
    width: 100%;
    font-family: "Roboto", sans-serif;
  font-weight: 700;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
  font-size: 4.5rem;
  text-align:center;
  color:#ffffff
}

button{
  font-family: "Roboto", sans-serif;
  font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 8px;
    border-radius: 3px;
    border: 0px;
  background: #000000;
  color:#ffffff;
  text-transform: uppercase;
  cursor:pointer;
  margin-top:8px;
}

button:focus{
  outline:none;
}

API('PyzBqo')

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};

Vue.component("color-input", {
  props: ["colorp"],
  template:
    '<div><input type="text" v-model="color"></div>',
  data() {
    return {
      color: this.colorp,
      tweenedColor: this.colorp,
      randomColor:''
    };
  },
  methods: {
    changeColor() {
      this.color = this.randomColor = randomHex()
      
    }
  },
  watch: {
    color() {
      TweenLite.to(this.$data, 1, { tweenedColor: this.color });
    },
    animatedColor() {
      this.$emit('new-color',{index : this.$vnode.key,color: this.animatedColor})
    }
  },
  computed: {
    animatedColor() {
      return this.tweenedColor;
    },

    backgroundStyle() {
      return {
        background: this.animatedColor
      };
    }
  },
  created() {
  }
});

function randomHex() {
  return (
    "#" +
    (
      "000000" +
      Math.random()
        .toString(16)
        .slice(2, 8)
        .toUpperCase()
    ).slice(-6)
  );
}

new Vue({
  el: "#app",
  data: {
      color: "",
      tweenedColor: "",
      colors: Array ,
      animatedColors: Array
  },
  created() {
    let colors = ['#009FFF', '#EC2F4B']
    this.colors = this.animatedColors = colors
  },
  methods: {
    updateColors(e) {
      this.animatedColors.splice(e.index,1 , e.color)
    },
    randomColors() {
      this.$children.forEach((color) => {
        color.changeColor()
      })
    }
  },
  computed: {
    gradient() {
      return JSON.stringify(this.animatedColors).replaceAll('"','').replace('[','').replace(']','')
    },
    background() {
      return {
        background: 'linear-gradient(45deg,' + this.gradient + ')'
      }
    }
  }
});