Pass a prop to a form in Nuxt

The user clicks on a link that refers to a package that i offer to make a homepage. It's like three packages, Small, Medium and Big. All that has different prices.

If the user clicks on Small. That takes him to another page with a form that he can type his name and message. In the URL-bar it say, www.example.com/small. Now i've got a hidden checkbox that checks the small checkbox based on the prop that i pass it to. All fine and dandy there. But when i send the mail and i read it in gmail. I can't see what package selected. All a see is, Small: True, and the name and message...

Don't know if you guys understand me but i will clarify if you want.

This is the Contact component

<template>
  <div class="container">
    <h1></h1>
    <h3></h3>

    <div class="content wrapper">
      <form
        name="contact-form"
        action="/tack"
        autocomplete="off"
        netlify-honeypot="bot-field"
        method="POST"
        netlify
        @submit="validateBeforeSubmit"
      >
        <div class="input-field">
          <label class="form-label" for="name">Ditt namn:</label>
          <input
            v-validate="'required|alpha_spaces'"
            class="form-field inputs"
            name="namn"
            placeholder="För- &amp; efternamn"
            onfocus="this.placeholder = ''"
            onblur="this.placeholder = 'För- &amp; efternamn'"
            required
            v-model="namn"
            :class="{'input': true, 'is-danger': errors.has('namn') }"
          >
          <span v-show="errors.has('namn')" class="error"></span>
          <input type="hidden" name="form-name" value="contact-form">
        </div>

        <div class="input-field">
          <label class="form-label" for="email">Din email:</label>
          <input
            type="email"
            required
            v-validate="'required|email'"
            class="form-field inputs"
            name="email"
            placeholder="namn@foretag.se"
            onfocus="this.placeholder = ''"
            onblur="this.placeholder = 'namn@foretag.se'"
            v-model="email"
            :class="{'input': true, 'is-danger': errors.has('email') }"
          >
          <span v-show="errors.has('email')" class="error"></span>
        </div>

        <div class="select-package hidden">
          <p>Välj vilket paket du önskar - <em>Valfritt</em></p>
          <div class="package-field">
            <input type="checkbox" id="checkbox1" name="checkboxes" :value="liten" :checked="value" v-on:input="liten = $event.target.value" v-model="liten">
            <label for="checkbox1">Liten</label>
          </div>

          <div class="package-field">
            <input type="checkbox" id="checkbox2" name="checkboxes" :checked="value">
            <label for="checkbox2">Mellan</label>
          </div>

          <div class="package-field">
            <input type="checkbox" id="checkbox3" name="checkboxes"    :value="stor" :checked="value" v-on:input="stor = $event.target.value" v-model="stor">
            <label for="checkbox3">Stor</label>
          </div>
        </div>
        <div class="input-textarea">
          <label class="form-label" for="message">Meddelande:</label>
          <textarea
            required
            class="form-field inputs"
            name="meddelande"
            placeholder="Ditt meddelande..."
            onfocus="this.placeholder = ''"
            onblur="this.placeholder = 'Ditt meddelande...'"
            v-model="meddelande"
            v-validate="'required|min:5'"
            :class="{'input': true, 'is-danger': errors.has('meddelande') }"
          ></textarea>
          <span v-show="errors.has('meddelande')" class="error"></span>
        </div>

        <div class="gdpr">
          <div class="gdpr-checkbox">
            <input type="checkbox" id="GDPR" v-validate="'required'" value="checked" name="GDPR">
            <label v-show="errors.has('GDPR')" class="error" for="GDPR"> Godkänn hanteringen av din personliga data.</label>
            <label v-if="!errors.has('GDPR')" for="GDPR">Godkänn hanteringen av din personliga data.</label>
          </div>
          <p>Ni kan läsa mer om vår policy och vår hantering av persondata <nuxt-link to="/policy" class="gdpr-link eyebrow">här</nuxt-link></p>
          <p>Du måste godkänna <nuxt-link class="gdpr-link eyebrow" to="/policy">hantering av persondata</nuxt-link> för att kunna skicka ditt meddelande.</p>

        </div>

        <div class="form-button">
          <input class="button" type="submit" value="Skicka meddelande">
        </div>

      </form>
    </div>
  </div>
</template>

<script>
import vuex from "vuex"
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";



export default {
  props: ['paketText', 'underText', 'stor', 'mellan', 'liten', 'value'],
  data: () => {
    return {

    }
  },
  methods: {
    validateBeforeSubmit(e) {

      this.$validator.validate().then(result => {
        console.log(result);
        if (!result) {
          alert("Ange rätt uppgifter i formuläret");
          e.preventDefault();
        } else {
          console.log("Skickat");
          this.$router.push({
            name: "tack",
            path: "/tack"
          });
          return true;
        }
      });
    }
  },
  computed: {
    meddelande: {
      get() {
        return this.$store.state.meddelande;
      },
      set(val) {
        this.$store.commit("update_meddelande", val);
      }
    },
    email: {
      get() {
        return this.$store.state.email;
      },
      set(val) {
        this.$store.commit("update_email", val);
      }
    },
    namn: {
      get() {
        return this.$store.state.namn;
      },
      set(val) {
        this.$store.commit("update_namn", val);
      }
    }
  }
};
</script>

liten = small

This is the smallpackage component

<template>
  <div class="container">
    <Contact paketText="Lilla paketet" underText="Det här paketet är perfekt för dig som vill ha en hemsida som är enkel men som ändå förmedlar ditt budskap på ett bra sätt." liten="true" value="checked" />
  </div>
</template>

<script>
 import Contact from '@/components/Contact'
export default {
  components: {
    Contact
  }
}
</script>

<style lang="sass" scoped>

</style>

I'm hoping to see what package the user selected in my mail when he sends the form.