Refactors ml_experiments_show.vue

What does this MR do and why?

Before working on UI improvements, we are refactoring this component. This MR has no UI/UX changes.

How to set up and validate locally

1. Enable the feature flag

   echo "Feature.enable(:ml_experiment_tracking)" | bundle exec rails c

2. Create an Experiment and 10 candidates

   # Added variables
   user_id = 1
   project_id = 1
   
   exp = Ml::Experiment.create!(name: "Awesome Gitlab Experiment", user_id: user_id, project_id: project_id)
   10.times.each { |i| exp.candidates.create!(user_id: user_id, start_time: 0, name: "candidate_#{i}") }
   exp.candidates.each_with_index { |c, i| c.metrics.create!(name: "auc", value: i*0.1 , tracked_at: Time.zone.now, step: 1)} 
   exp.candidates.each_with_index { |c, i| c.metrics.create!(name: "accuracy", value: i* 0.1+0.1 , tracked_at: Time.zone.now, step: 1)} 
   exp.candidates.each { |c| c.params.create!(name: "algorithm", value: ["LogisticRegression", "DecisionTree"].sample )}

3. Navigate to <your project>/-/ml/experiments and click on "Awesome Gitlab Experiment"

4. Verify that the page loads the same with and without this MR changes.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #388207 (closed)