diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 7ead8a18c2a..6ed14261fc3 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -451,7 +451,7 @@
           <div v-if="!isFolder && hasLastDeploymentKey" class="js-commit-component">
             <commit-component
               :tag="commitTag"
-              :ref="commitRef"
+              :commit_ref="commitRef"
               :commit_url="commitUrl"
               :short_sha="commitShortSha"
               :title="commitTitle"
diff --git a/app/assets/javascripts/vue_common_component/commit.js.es6 b/app/assets/javascripts/vue_common_component/commit.js.es6
index 1bc68c1ba2f..2ef2959cbf4 100644
--- a/app/assets/javascripts/vue_common_component/commit.js.es6
+++ b/app/assets/javascripts/vue_common_component/commit.js.es6
@@ -23,7 +23,7 @@
        * name
        * ref_url
        */
-      ref: {
+      commit_ref: {
         type: Object,
         required: false,
         default: () => ({}),
@@ -79,8 +79,8 @@
        *
        * @returns {Boolean}
        */
-      hasRef() {
-        return this.ref && this.ref.name && this.ref.ref_url;
+      hasCommitRef() {
+        return this.commit_ref && this.commit_ref.name && this.commit_ref.ref_url;
       },
 
       /**
@@ -131,15 +131,15 @@
     template: `
       <div class="branch-commit">
 
-        <div v-if="hasRef" class="icon-container">
+        <div v-if="hasCommitRef" class="icon-container">
           <i v-if="tag" class="fa fa-tag"></i>
           <i v-if="!tag" class="fa fa-code-fork"></i>
         </div>
 
-        <a v-if="hasRef"
+        <a v-if="hasCommitRef"
           class="monospace branch-name"
-          :href="ref.ref_url">
-          {{ref.name}}
+          :href="commit_ref.ref_url">
+          {{commit_ref.name}}
         </a>
 
         <div class="icon-container commit-icon commit-icon-container"></div>
diff --git a/changelogs/unreleased/25264-ref-commit.yml b/changelogs/unreleased/25264-ref-commit.yml
new file mode 100644
index 00000000000..13a33da9801
--- /dev/null
+++ b/changelogs/unreleased/25264-ref-commit.yml
@@ -0,0 +1,4 @@
+---
+title: Change ref property to commitRef in vue commit component
+merge_request: 7901
+author:
diff --git a/spec/javascripts/vue_common_components/commit_spec.js.es6 b/spec/javascripts/vue_common_components/commit_spec.js.es6
index b1dbc8bd5fa..d170517dd9b 100644
--- a/spec/javascripts/vue_common_components/commit_spec.js.es6
+++ b/spec/javascripts/vue_common_components/commit_spec.js.es6
@@ -10,7 +10,7 @@ describe('Commit component', () => {
       el: document.querySelector('.test-commit-container'),
       propsData: {
         tag: false,
-        ref: {
+        commit_ref: {
           name: 'master',
           ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
         },
@@ -34,7 +34,7 @@ describe('Commit component', () => {
 
       props = {
         tag: true,
-        ref: {
+        commit_ref: {
           name: 'master',
           ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
         },
@@ -59,11 +59,11 @@ describe('Commit component', () => {
     });
 
     it('should render a link to the ref url', () => {
-      expect(component.$el.querySelector('.branch-name').getAttribute('href')).toEqual(props.ref.ref_url);
+      expect(component.$el.querySelector('.branch-name').getAttribute('href')).toEqual(props.commit_ref.ref_url);
     });
 
     it('should render the ref name', () => {
-      expect(component.$el.querySelector('.branch-name').textContent).toContain(props.ref.name);
+      expect(component.$el.querySelector('.branch-name').textContent).toContain(props.commit_ref.name);
     });
 
     it('should render the commit short sha with a link to the commit url', () => {
@@ -103,7 +103,7 @@ describe('Commit component', () => {
       fixture.set('<div class="test-commit-container"></div>');
       props = {
         tag: false,
-        ref: {
+        commit_ref: {
           name: 'master',
           ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
         },