Fixed computations throwing errors when not provided with context

app/imports/ui/components/computation/Computed.vue

@@ -1,23 +1,27 @@
 <template lang="html">
   <div
-    v-html="computedValue"
     class="computed"
-    :class="expectNumber && 'symbols-are-errors'"
+    :class="{
+      'symbols-are-errors': expectNumber && scope,
+      'code': errors.length,
+    }"
+    v-html="computedValue"
   />
 </template>
 
 <script>
 import evaluateString from '/imports/api/creature/computation/afterComputation/evaluateString.js';
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
-import { isFinite } from 'lodash';
 
 export default {
   props: {
     value: {
       type: String,
+      default: '',
     },
     scope: {
       type: Object,
+      default: undefined,
     },
     expectNumber: {
       type: Boolean,
@@ -27,14 +31,30 @@ export default {
       type: Boolean
     },
   },
-  computed: {
-    computedValue(){
+  data(){return {
+    errors: false,
+    computedValue: '',
+  }},
+  watch: {
+    value(){
+      this.recalculate();
+    },
+    scope(){
+      this.recalculate();
+    },
+  },
+  mounted(){
+    this.recalculate();
+  },
+  methods: {
+    recalculate(){
       if (!this.value) return;
       let {result, errors} = evaluateString(this.value, this.scope);
       if (this.signed){
         result = numberToSignedString(result);
       }
-      return result;
+      this.computedValue = result;
+      this.errors = errors;
     }
   }
 }
@@ -44,4 +64,10 @@ export default {
   .computed.symbols-are-errors .math-symbol {
     color: red;
   }
+  .computed.code {
+    font-family: monospace,monospace;
+  }
+  .computed .math-binary-operator {
+    margin: 0 6px;
+  }
 </style>

app/imports/ui/components/computation/ComputedForCreature.vue

@@ -8,10 +8,11 @@
 
 <script>
 import Computed from '/imports/ui/components/computation/Computed.vue';
-import Creatures from '/imports/api/creature/Creatures.js';
 
 export default {
-  inject: ['computationContext'],
+  inject: {
+    computationContext: { default: {} }
+  },
   components: {
     Computed,
   },
@@ -21,14 +22,10 @@ export default {
       default: undefined,
     },
   },
-  meteor: {
-    creature(){
-      return Creatures.findOne(this.creatureId);
-    },
-  },
   computed: {
     scope(){
-      return this.computationContext.creature && this.computationContext.creature.variables;
+      return this.computationContext.creature &&
+      this.computationContext.creature.variables;
     }
   }
 }