diff --git a/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue b/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue
index bcc703b..3855c19 100644
--- a/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue
+++ b/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue
@@ -1,6 +1,6 @@
 <template>
   <q-btn
-    v-if="cost_price_pro_volume"
+    v-if="pricePerVolume"
     color="positive"
     icon-right="add"
     label="Abgabe hinzufügen"
@@ -14,56 +14,36 @@
           dense
           label="Liter"
           type="number"
-          min='0'
-          step='0.01'
+          min="0"
+          step="0.01"
         />
       </div>
       <div class="row justify-between q-pa-sm">
         <q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
-        <q-btn
-          v-close-popup
-          label="Speichern"
-          color="primary"
-          @click="addVolume(rows)"
-        />
+        <q-btn v-close-popup label="Speichern" color="primary" @click="addVolume(rows)" />
       </div>
     </q-menu>
   </q-btn>
 </template>
 
-<script lang='ts'>
+<script lang="ts">
 import { DrinkPriceVolume } from '../../../store';
-import { ref } from 'vue';
-import {CompositionAPIEmit} from 'vue-typed-emit';
-import {SetupContext} from 'vue';
+import { ref, defineComponent } from 'vue';
 
-interface Events {
-  addVolume: DrinkPriceVolume
-}
-
-interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
-  emit: CompositionAPIEmit<Events>
-}
-
-export default {
+export default defineComponent({
   name: 'NewVolume',
   props: {
-    cost_price_pro_volume: {
-      type: undefined,
-      required: true
-    }
+    pricePerVolume: {
+      type: Number,
+      required: true,
+    },
   },
-  emits: ["addVolume"],
-  setup(_: any, {emit}: ExtendedSetupContext) {
+  emits: { addVolume: (val: DrinkPriceVolume) => !!val },
+  setup(_, { emit }) {
     const emptyVolume: DrinkPriceVolume = {
       id: -1,
       _volume: 0,
-      volume: null,
-      min_prices: [
-        { percentage: 100, price: null },
-        { percentage: 250, price: null },
-        { percentage: 300, price: null },
-      ],
+      min_prices: [{ percentage: 100 }, { percentage: 250 }, { percentage: 300 }],
       prices: [],
       ingredients: [],
     };
@@ -77,18 +57,16 @@ export default {
       }, 200);
     }
     function addVolume() {
-      emit("addVolume", <DrinkPriceVolume>newVolume.value)
+      emit('addVolume', <DrinkPriceVolume>newVolume.value);
     }
 
     return {
       addVolume,
       cancelAddVolume,
       newVolume,
-    }
-  }
-};
+    };
+  },
+});
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue b/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue
index 268d91e..7066419 100644
--- a/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue
+++ b/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue
@@ -49,13 +49,7 @@
             label-set="Speichern"
             @save="updateVolume(props.row, drink)"
           >
-            <q-input
-              v-model.number="props.row.volume"
-              dense
-              filled
-              type="number"
-              suffix="L"
-            />
+            <q-input v-model.number="props.row.volume" dense filled type="number" suffix="L" />
           </q-popup-edit>
         </q-td>
         <q-td key="min_prices" :props="props">
@@ -84,38 +78,39 @@
       </q-tr>
       <q-tr v-show="props.expand" :props="props">
         <q-td colspan="100%">
-          <ingredients :ingredients="props.row.ingredients" :volume="props.row" @updateDrink="updateDrink"/>
+          <ingredients
+            :ingredients="props.row.ingredients"
+            :volume="props.row"
+            @updateDrink="updateDrink"
+          />
         </q-td>
       </q-tr>
     </template>
     <template #bottom>
       <div class="full-width row justify-end">
-        <new-volume :cost_price_pro_volume="drink.cost_price_pro_volume" @addVolume="addVolume($event, drink)" />
+        <new-volume
+          :cost_price_pro_volume="drink.cost_price_pro_volume"
+          @addVolume="addVolume($event, drink)"
+        />
       </div>
     </template>
     <template #no-data>
       <div class="full-width row justify-end">
-        <new-volume :cost_price_pro_volume="drink.cost_price_pro_volume" @addVolume="addVolume($event, drink)" />
+        <new-volume
+          :cost_price_pro_volume="drink.cost_price_pro_volume"
+          @addVolume="addVolume($event, drink)"
+        />
       </div>
     </template>
   </q-table>
 </template>
 
-<script lang='ts'>
+<script lang="ts">
 import { Drink, DrinkPriceVolume, usePricelistStore } from '../../store';
 import PriceTable from 'src/plugins/pricelist/components/CalculationTable/PriceTable.vue';
 import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
 import NewVolume from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue';
-import {CompositionAPIEmit} from 'vue-typed-emit';
-import {SetupContext} from 'vue'
-
-interface Events {
-  updateDrink: undefined
-}
-
-interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
-  emit: CompositionAPIEmit<Events>
-}
+import { PropType, defineComponent } from 'vue';
 
 const columns = [
   {
@@ -133,40 +128,40 @@ const columns = [
     label: 'Preise',
     field: 'prices',
   },
-]
+];
 
-export default {
+export default defineComponent({
+  name: 'DrinkPriceVolumsTable',
+  components: { PriceTable, Ingredients, NewVolume },
   props: {
     visibleColumns: {
       type: Array,
-      default: columns
+      default: columns,
     },
     columns: {
       type: Array,
-      default: columns
+      default: columns,
     },
     rows: {
-      type: [] as Array<DrinkPriceVolume>,
+      type: Array as PropType<Array<DrinkPriceVolume>>,
       required: true,
     },
     drink: {
-      type: Object as () => Drink,
-      required: true
-    }
-
+      type: Object as PropType<Drink>,
+      required: true,
+    },
   },
-  name: 'DrinkPriceVolumsTable',
-  components: { PriceTable, Ingredients, NewVolume },
-  setup(_: any, {emit}: ExtendedSetupContext) {
-    const store = usePricelistStore()
+  emits: { updateDrink: () => true },
+  setup(_, { emit }) {
+    const store = usePricelistStore();
 
     function addVolume(volume: DrinkPriceVolume, drink: Drink) {
-      drink.volumes.push(volume)
-      updateDrink()
+      drink.volumes.push(volume);
+      updateDrink();
     }
 
     function updateDrink() {
-      emit("updateDrink")
+      emit('updateDrink');
     }
     function deleteVolume(volume: FG.DrinkPriceVolume, drink: FG.Drink) {
       store.deleteVolume(volume, drink);
@@ -190,13 +185,9 @@ export default {
       },
     ];
 
-    return {addVolume,
-      updateDrink,
-      deleteVolume, column_prices}
-  }
-};
+    return { addVolume, updateDrink, deleteVolume, column_prices };
+  },
+});
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/plugins/pricelist/components/CalculationTable/Ingredients.vue b/src/plugins/pricelist/components/CalculationTable/Ingredients.vue
index b7b42a4..bdb80f4 100644
--- a/src/plugins/pricelist/components/CalculationTable/Ingredients.vue
+++ b/src/plugins/pricelist/components/CalculationTable/Ingredients.vue
@@ -118,6 +118,7 @@
               />
               <q-input
                 v-else-if="newIngredient && newIngredient.price"
+                v-model="newIngredient.price"
                 filled
                 dense
                 label="Preis"
@@ -126,7 +127,6 @@
                 step="0.1"
                 fill-mask="0"
                 mask="#.##"
-                v-model='newIngredient.price'
                 suffix="€"
               />
             </div>
@@ -150,17 +150,6 @@
 import { computed, defineComponent, PropType, ref } from 'vue';
 import { DrinkPriceVolume, usePricelistStore } from '../../store';
 
-import {CompositionAPIEmit} from 'vue-typed-emit';
-import {SetupContext} from 'vue';
-
-interface Events {
-  updateDrink: undefined
-}
-
-interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
-  emit: CompositionAPIEmit<Events>
-}
-
 export default defineComponent({
   name: 'Ingredients',
   props: {
@@ -173,8 +162,8 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ["updateDrink"],
-  setup(_:any, {emit}: ExtendedSetupContext) {
+  emits: { updateDrink: () => true },
+  setup(_, { emit }) {
     const store = usePricelistStore();
 
     const emptyIngredient: FG.Ingredient = {
@@ -185,34 +174,29 @@ export default defineComponent({
     const newIngredient = ref<FG.Drink | FG.ExtraIngredient>();
     const newIngredientVolume = ref<number>(0);
     function addIngredient(volume: DrinkPriceVolume) {
-      let ingredient : FG.Ingredient
       if ((<FG.Drink>newIngredient.value)?.volume && newIngredient.value) {
-        volume.ingredients.push(
-          {
+        volume.ingredients.push({
+          id: -1,
+          drink_ingredient: {
             id: -1,
-            drink_ingredient: {
-              id: -1,
-              drink_ingredient_id: newIngredient.value.id,
-              volume: newIngredientVolume.value,
-            },
-            extra_ingredient: undefined,
+            drink_ingredient_id: newIngredient.value.id,
+            volume: newIngredientVolume.value,
           },
-        );
+          extra_ingredient: undefined,
+        });
       } else if (newIngredient.value) {
-        volume.ingredients.push(
-          {
-            id: -1,
-            drink_ingredient: undefined,
-            extra_ingredient: <FG.ExtraIngredient>newIngredient.value,
-          },
-        );
+        volume.ingredients.push({
+          id: -1,
+          drink_ingredient: undefined,
+          extra_ingredient: <FG.ExtraIngredient>newIngredient.value,
+        });
       }
-      updateDrink()
+      updateDrink();
       cancelAddIngredient();
     }
     function updateDrink() {
-      console.log("updateDrink from Ingredients")
-      emit("updateDrink")
+      console.log('updateDrink from Ingredients');
+      emit('updateDrink');
     }
     function cancelAddIngredient() {
       setTimeout(() => {
@@ -224,7 +208,7 @@ export default defineComponent({
     }
     const drinks = computed(() =>
       store.drinks.filter((drink) => {
-        console.log("computed drinks", drink.name, drink.cost_price_pro_volume)
+        console.log('computed drinks', drink.name, drink.cost_price_pro_volume);
         return drink.cost_price_pro_volume;
       })
     );
diff --git a/src/plugins/pricelist/components/CalculationTable/PriceTable.vue b/src/plugins/pricelist/components/CalculationTable/PriceTable.vue
index e4afab6..13fcd3a 100644
--- a/src/plugins/pricelist/components/CalculationTable/PriceTable.vue
+++ b/src/plugins/pricelist/components/CalculationTable/PriceTable.vue
@@ -48,11 +48,7 @@
           </q-popup-edit>
         </q-td>
         <q-td key="public" :props="prices_props">
-          <q-toggle
-            v-model="prices_props.row.public"
-            dense
-            @update:modelValue="updateDrink"
-          />
+          <q-toggle v-model="prices_props.row.public" dense @update:modelValue="updateDrink" />
         </q-td>
 
         <q-td>
@@ -142,17 +138,6 @@
 import { defineComponent, ref } from 'vue';
 import { DrinkPriceVolume, usePricelistStore } from '../../store';
 
-import {CompositionAPIEmit} from 'vue-typed-emit';
-import {SetupContext} from 'vue';
-
-interface Events {
-  updateDrink: undefined
-}
-
-interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
-  emit: CompositionAPIEmit<Events>
-}
-
 export default defineComponent({
   name: 'PriceTable',
   props: {
@@ -173,8 +158,8 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ["updateDrink"],
-  setup(props, {emit}: ExtendedSetupContext) {
+  emits: { updateDrink: () => true },
+  setup(props, { emit }) {
     const store = usePricelistStore();
 
     const emptyPrice: FG.DrinkPrice = {
@@ -185,12 +170,12 @@ export default defineComponent({
     };
     const newPrice = ref(emptyPrice);
     function addPrice(volume: DrinkPriceVolume) {
-      volume.prices.push(newPrice.value)
-      updateDrink()
+      volume.prices.push(newPrice.value);
+      updateDrink();
       cancelAddPrice();
     }
     function updateDrink() {
-      emit("updateDrink")
+      emit('updateDrink');
     }
     function cancelAddPrice() {
       setTimeout(() => {
diff --git a/src/plugins/pricelist/store.ts b/src/plugins/pricelist/store.ts
index e6ea2e8..26889fe 100644
--- a/src/plugins/pricelist/store.ts
+++ b/src/plugins/pricelist/store.ts
@@ -4,11 +4,11 @@ import { AxiosResponse } from 'axios';
 import { computed, WritableComputedRef } from 'vue';
 
 interface MinPrice extends Omit<FG.MinPrices, 'price'> {
-  price: WritableComputedRef<number> | null;
+  price?: WritableComputedRef<number>;
 }
 interface DrinkPriceVolume extends Omit<Omit<FG.DrinkPriceVolume, 'volume'>, 'min_prices'> {
   _volume: number;
-  volume: WritableComputedRef<number> | null;
+  volume?: WritableComputedRef<number>;
   min_prices: MinPrice[];
 }
 interface Drink extends Omit<Omit<FG.Drink, 'cost_price_pro_volume'>, 'volumes'> {
@@ -17,7 +17,7 @@ interface Drink extends Omit<Omit<FG.Drink, 'cost_price_pro_volume'>, 'volumes'>
   _cost_price_pro_volume?: number;
 }
 
-class DrinkPriceVolume {
+class DrinkPriceVolume implements DrinkPriceVolume {
   constructor({ id, volume, min_prices, prices, ingredients }: FG.DrinkPriceVolume, drink: Drink) {
     this.id = id;
     this._volume = volume;