Vue.js variable undefined after being passed to another component

I have a variable commentRecId in component A, that I want to pass to use it in component B.

I included this in the template of component A:

<EditComment v-bind:comment-rec-id="commentRecId" v-if="showEdit"></EditComment>

I set showEdit to true in the methods of component A:

methods: {
  loadComments: function() {
    this.showEdit = true;
    console.log("this.ShowEdit in ShowComment: " + this.showEdit);
    console.log("commentRecID in ShowComment: " + this.commentRecId);

Up until now this works perfectly fine and commentRecID does have a value.

The problem is that the variable commentRecId is shown as undefined in the other component B and after hours of trial and error I still don't understand why.

In component B, I have this in the props:

export default {
    props: ["commentRecId"],

and used this to reference the variable:

var statID = this.commentRecId;
console.log("Edit Comment this.commentRecId: " + statID);

Can someone tell me what I'm doing wrong?

(Component A) (Component B)