Switching to computed style

Oops, now its way better practise

src/components/SimpleProgressBar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div class="background">
-			<div class="bar" ref="bar"/>
+			<div class="bar" :style="progressBar"/>
 		</div>
 	</div>
 </template>
@@ -13,28 +13,21 @@
 			'max',
 			'steps',
 		],
-		methods: {
-			update: function () {
+		computed: {
+			stepsize() {
+				return 100 / this.steps
+			},
+			progressBar() {
 				let per = this.count / this.max * 100
-				let bar = this.$refs.bar;
-
 				//Break down into steps.
 				per = Math.floor(per / this.stepsize) * this.stepsize
 
-				bar.style.width = per + '%'
-				bar.style.backgroundColor = per >= 100 ? '#0f0' : '#f00'
-			},
-		},
-		computed: {
-			stepsize() {
-				return 100 / this.steps
+				return {
+					'width': per + '%',
+					'backgroundColor': per >= 100 ? '#0f0' : '#f00',
+				}
 			}
 		},
-		watch: {
-			count: function () {
-				this.update()
-			},
-		}
 	}
 </script>