cart.vue

<template lang="pug">
svg(viewBox="0 0 119 20" version="1.1" xmlns="http://www.w3.org/2000/svg")
  rect(v-for="p, index in om" width="1" :height="p === 0 ? 1  : p" :key="index" :x="index * 2" :y="p === 0 ? 19 : 20 - p" fill="#999")
</template>

<script>
export default {

  data () {
    return {
      html: '',
      points: [
        0,1,1,2,3,2,3,2,3,3,
        3,3,3,3,3,3,3,3,3,3,
        3,3,3,3,3,3,3,3,3,3,
        3,3,3,3,4,4,5,6,5,16,
        10,5,15,13,2,3,4,2,3,3,
        3,3,2,2,3,2,6,5,2,2
      ]
    }
  },

  computed: {
    om () {
      return this.points
    }
  },

  mounted () {
    setInterval(this.foo, 500)
  },

  methods: {
    foo () {
        // 0 - 10
        const a = Math.floor(Math.random() * 11)
        // 5 - 20
        const b = Math.floor(Math.random() * 16) + 5
        this.points.shift()
        this.points.push(a)
    }
  }
}
</script>

<style lang="stylus" scoped>
svg
  width 119px
  height auto
  vertical-align middle
  margin-right 1rem
</style>