Got healthbars persisting data to the database

app/imports/ui/components/HealthBarCard.vue

@@ -0,0 +1,26 @@
+<template lang="html">
+	<v-card>
+		<v-card-text>
+			<health-bar
+				v-for="attribute in attributes"
+				:key="attribute._id"
+				:value="attribute.value + (attribute.adjustment || 0)"
+				:maxValue="attribute.value"
+				@change="e => $emit('change', {_id: attribute._id, change: e})"
+			/>
+		</v-card-text>
+	</v-card>
+</template>
+
+<script>
+	import HealthBar from '/imports/ui/components/HealthBar.vue';
+
+	export default {
+		props: {
+			attributes: Array,
+		},
+		components: {
+			HealthBar,
+		},
+	}
+</script>

app/imports/ui/components/HealthBarCardContainer.vue

@@ -0,0 +1,40 @@
+<template lang="html">
+  <health-bar-card
+		:attributes="attributes"
+		@change="healthBarChanged"
+	/>
+</template>
+
+<script>
+	import Attributes from '/imports/api/creature/properties/Attributes.js';
+	import { adjustAttribute } from '/imports/api/creature/properties/Attributes.js';
+	import HealthBarCard from '/imports/ui/components/HealthBarCard.vue';
+
+	export default {
+		components: {
+			HealthBarCard,
+		},
+		props: {
+			charId: String,
+		},
+		meteor: {
+			attributes(){
+				return Attributes.find({
+					charId: this.charId,
+					type: 'healthBar',
+					value: {$ne: 0},
+				}, {
+					sort: {order: 1},
+				});
+			},
+		},
+		methods: {
+			healthBarChanged({_id, change}){
+				adjustAttribute.call({
+					_id,
+					[change.type]: change.value
+				});
+			},
+		},
+	};
+</script>