diff --git a/CHANGELOG.md b/CHANGELOG.md
index ddf9a35802b16619c06de9a5bf441d45745cbd16..c91bdc75da61f8ff20877f40b7588f47f3e9149b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - The hydrograph data table is now a Vue component and can be sorted by time.
 - Parameter selection list now has the option to graph a second parameter.
 - Reworked the USWDSDatePicker to initialize itself and to handle changes to properties appropriately.
+- Hydrograph Graph Brush is now implemented with a Vue component.
 
 ### Fixed
 - Parameter codes with multiple methods will now show statistical data for each method available.
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index d6f81e6977beb27f338c8027eeefa01134a50c26..ac8bf37544e3de684f0b88d6924bfc10ef1c07fa 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -144,6 +144,9 @@ export const attachToNode = function(store,
     if (!showOnlyGraph) {
         initializeTooltipCursorSlider(graphContainer, store);
         graphContainer.append('div').attr('id', 'hydrograph-brush-container');
+        //TODO: The tooltips, legend and  the main hydrograph can be added to the HydrographApp.
+        // The main hydrograph should be converted to a Vue component last. As part of that task we
+        // will figure out how to handle the loading indicator and the no data overlay
         const hydrographApp = createApp(HydrographApp, {});
         hydrographApp.use(ReduxConnectVue, {
             store,
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.test.js
index 346ee9f9c74f0615b25e53448b9d7b92830c397f..c9c073b7c64cf798c6a64193d7522f8c68dcd38c 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.test.js
@@ -78,7 +78,7 @@ describe('monitoring-location/components/hydrograph/vue-components/graph-brush.v
             expect(wrapper.find('.iv-graph-gw-levels-group').exists()).toBe(false);
         });
 
-        it('Expects that setting initialLoadingComplete to true renders the IV and GW levels data', async () => {
+        it('Expects that setting initialLoadingComplete to true renders the IV and GW levels data', async() => {
             initialLoadingComplete.value = true;
             await wrapper.vm.$nextTick();
 
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.vue
index de2c7579645cac90b0c2e12546b5604a8f3cd211..303c6687113b35487440fbb48a469ef36210bdfa 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="hydrograph-container">
     <svg
-      class="brush-svg"
       ref="brushSvg"
+      class="brush-svg"
       xmlns="http://www.w3.org/2000/svg"
       ga-on="click"
       ga-event-category="hydrograph-interacation"
@@ -16,8 +16,8 @@
         drag handlers to change timeframe
       </text>
       <g
-        class="graph-brush-group"
         ref="graphBrushGroup"
+        class="graph-brush-group"
         :transform="centerTransform"
       />
     </svg>
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/method-picker.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/method-picker.vue
index 998747c609af015233908f26ee9f37c1f11b9090..1dadc39417617c9268242fa4cd8e33bec0764f3d 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/method-picker.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/method-picker.vue
@@ -6,8 +6,8 @@
     >
       Sampling Methods/Sub-locations:
       <span
-        class="usa-tooltip"
         ref="tooltip"
+        class="usa-tooltip"
         data-position="right"
         title="The names used in dropdown menu are often specific to a particular monitoring location and describe sampling details used to distinguish time-series of the same type--examples include variations in physical location and sensor type."
       >
@@ -89,6 +89,7 @@ export default {
 
     return {
       infoIcon,
+      tooltip,
       hasMethodsWithNoPoints,
       selectThisMethod
     };